html 悬浮图片中心放大,html – 放大图像并在悬停时显示div

在图像悬停时,我想放大图像并显示带有透明背景的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, 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%;

}