放大图像并在悬停时显示 div答案

【问题标题】：Zoom in an image and show a div on hover放大图像并在悬停时显示 div
【发布时间】：2013-11-27 11:45:43
【问题描述】：

在图像悬停时，我想放大图像并显示一个带有透明背景的 div。

这是我的代码。在下面的示例中，当我将鼠标悬停在 .image 类中的图像上时，我想对其进行缩放，并希望在 div 的中心显示类为 .mylink 的链接。

我可以在悬停时放大，但是当我为 .text 添加样式时，它不再放大图像。

HTML：

<div id="box">
    <div class="image">
        <img src="http://s18.postimg.org/il7hbk7i1/image.png" />
    </div>
    <div class="text">
        <a class="mylink">link</a>
    </div>
</div>

CSS：

#box {
    text-align: center;
    margin: auto;
    width: 250px;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.image img {
    width: 250px;
    height: 250px;
    overflow: hidden;

}
.image img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.image img:hover {    
    cursor: pointer;
    transform:scale(1.5);
    -ms-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -o-transform:scale(1.5);
}

.text{
    position: absolute;    
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.text:hover{
    background: rgba(255, 255, 255, 0.5);    
}

.text a{
    position: absolute;
    top: -100%;   
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.text:hover a{    
    top: 50%;
}

【问题讨论】：

tympanus.net/Tutorials/OriginalHoverEffects ，这就是你要找的。不是这样，codrops 还有很多其他类似的教程。

标签： html css

【解决方案1】：

尝试更改您的 CSS：

将display:block 添加到您的图片中
将初始 transform scale(1) 添加到您的 img
将悬停 CSS 规则调整为 #box:hover .image img

代码示例：http://codepen.io/jonathan/pen/MYBbMG

.image img {
   display:block;
   width: 250px;
   height: 250px;
}

.image img {        
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#box:hover .image img {    
    cursor: pointer;
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}

【讨论】：