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

Posted 2023-03-05

【中文标题】使用 css 将图像放大悬停在其他图像前面

【英文标题】：Hover image enlarge using css, in front of other images

【发布时间】：2013-09-07 04:33:52

【问题描述】：

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

这是小提琴 - http://jsfiddle.net/eF5CX/

html：

<table  border="0" align="center" cellpadding="0" cellspacing="3">
      <tr>
        <td ><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_cocktails.php"><img src="http://cloverparklakes6450.com/images/cocktails.jpg" name="cocktails"   border="0" align="top" id="cocktails" /></a><a href="http://cloverparklakes6450.com/events_cocktails.php" class="cornerLink">August 22 Friday Night Cocktails at Oak*** 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"   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 >&nbsp;</td>
      </tr>
      <tr>
        <td ><div class="imageWrapper1"><a href="events_golf.php"><img src="http://cloverparklakes6450.com/images/golf.jpg" name="golf"   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  border="0" align="center" cellpadding="0" cellspacing="1">
      <tr>
        <td ><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_picnic.php"><img src="http://cloverparklakes6450.com/images/picnic.jpg" name="picnic"   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 ><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_car.php"><img src="http://cloverparklakes6450.com/images/car.jpg"  name="car"   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;

【问题讨论】：

请用您的相关代码创建jsfiddle.net。

jsfiddle.net/eF5CX

这是你想要的吗？ jsfiddle.net/koala_dev/eF5CX/1 我刚刚将 z-index 添加到悬停包装器中

koala_dev，就是这样！谢谢！

【参考方案1】：

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

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

【讨论】：

太棒了。会指出，如果页面上没有其他内容设置了 z-index 和相对位置，则 z-index 值在很大程度上是任意的（因此，在我的情况下，即使将 z-index 设置为 1 也足够了，因为用户只能缩放在我们的文档中一次一张图片）

【参考方案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。

【讨论】：

我需要放大整个图像。我要这个外观rareview.com .. 我也喜欢文字效果zaptravel.com/from-phoenix/quality