在图像悬停时,我想放大图像并显示带有透明背景的div。
演示: http://jsfiddle.net/9q4mT/
这是我的代码。在下面的示例中,当我将鼠标悬停在.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%;
}
答案 0 :(得分:7)
尝试更改CSS:
display:block
添加到您的图片transform scale(1)
添加到您的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);
}