我有一张带有图像的表,并设置了一些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;
}
答案 0 :(得分:3)
只需给z-index悬停。
它会起作用。
就像下面一样;
.imageWrapper1:hover .cornerLink {
opacity: 0.8;
z-index:10;
}
答案 1 :(得分:0)
我会在Image周围放一个包装器并缩放这个包装器。
像这样:
<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。