在图像悬停时,我想放大图像并显示带有透明背景的div.
这是我的代码.在下面的示例中,当我将鼠标悬停在.Image类中的图像上时,我想要缩放它,并希望在div的中心显示类.mylink的链接.
我能够放大悬停但是当我为.text添加样式时,它不再放大图像.
HTML：
link
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,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%;
}
