Hover image enlarge using css, in front of other images

Question

I have a table with images and have set up some css to enlarge the images and display text on hover. I'm having trouble with the images enlarging in back of the other images. I need the hover enlarged image to be in front of the rest.

Here's the Fiddle - http://jsfiddle.net/eF5CX/

HTML:

<table width="522" border="0" align="center" cellpadding="0" cellspacing="3">
      <tr>
        <td width="179"><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_cocktails.php"><img src="http://cloverparklakes6450.com/images/cocktails.jpg" name="cocktails" width="179" height="265" border="0" align="top" id="cocktails" /></a><a href="http://cloverparklakes6450.com/events_cocktails.php" class="cornerLink">August 22 Friday Night Cocktails at Oakbrook CC</a></div></td>
        <td colspan="2" rowspan="2"><div class="imageWrapper1"><a href="events_gala.php"><img src="http://cloverparklakes6450.com/images/gala.jpg" name="gala" width="331" height="397" border="0" align="top" id="gala" /></a><a href="http://cloverparklakes6450.com/events_gala.php" class="cornerLink">8/23 Saturday Night Gala</a></div></td>
        <td width="1">&nbsp;</td>
      </tr>
      <tr>
        <td height="129"><div class="imageWrapper1"><a href="events_golf.php"><img src="http://cloverparklakes6450.com/images/golf.jpg" name="golf" width="179" height="129" border="0" align="top" id="golf" /></a><a href="http://cloverparklakes6450.com/events_golf.php" class="cornerLink">8/23 Golf Tournament</a></div></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <table width="518" border="0" align="center" cellpadding="0" cellspacing="1">
      <tr>
        <td width="293"><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_picnic.php"><img src="http://cloverparklakes6450.com/images/picnic.jpg" name="picnic" width="286" height="214" border="0" align="top" id="picnic" /></a><a href="http://cloverparklakes6450.com/events_picnic.php" class="cornerLink">8/24 Beach Picnic</a></div></td>
        <td width="222"><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_car.php"><img src="http://cloverparklakes6450.com/images/car.jpg" alt="" name="car" width="220" height="214" border="0" align="top" id="car" /></a><a href="http://cloverparklakes6450.com/events_car.php" class="cornerLink">8/24 Collector Car Cruise</a></div></td>
      </tr>
    </table>

CSS:

    .imageWrapper1:hover {
    cursor: pointer;
    height:auto;
    width: auto;
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
    box-shadow: 3px 3px 1px #111111;
}
.imageWrapper1 {
    position: relative;
    width: auto;
    height: auto;
}
.imageWrapper1 img {
    display: block;
}
.imageWrapper1 .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper1:hover .cornerLink {
    opacity: 0.8;
}

Solution

Just give an z-index to hover.
It will work.
Just like below;

.imageWrapper1:hover .cornerLink {
    opacity: 0.8;
    z-index:10;
}