我有一张带有图像的表格,并设置了一些 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"> </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> </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;
}