在圖像懸停時,我想放大圖像并顯示帶有透明背景的div.

這是我的代碼.在下面的示例中,當(dāng)我將鼠標(biāo)懸停在.Image類中的圖像上時,我想要縮放它,并希望在div的中心顯示類.mylink的鏈接.

我能夠放大懸停但是當(dāng)我為.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%;

}

總結(jié)

以上是生活随笔為你收集整理的html悬停放大图片代码,html – 放大图像并在悬停时显示div的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。