使用 css 将图像放大悬停在其他图像前面

Question

我有一张带有图片的表格，并设置了一些 CSS 来放大图片并在悬停时显示文本。我在其他图像后面放大图像时遇到问题。我需要将悬停放大的图像放在其余部分的前面。

这是小提琴 - 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;
}

Answer 1

只需提供一个 z-index 即可悬停。
它会起作用的。
如下所示；

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

Answer 2

我会在图像周围放置一个包装器并缩放这个包装器。

像这样：

<table class="content">
<tr>
    <td>
        <div class="zoom-img">
            <img src="http://i.imgur.com/JABvKgL.jpg" />
        </div>
    </td>
    <td>
        <div class="zoom-img">
            <img src="http://i.imgur.com/JABvKgL.jpg" />
        </div>
    </td>
</tr>

我已经为你设置了jsfiddle。