遮罩层
拥一个盒子(img-mark)作为遮罩层,当鼠标悬停到图上时,页面会出现一个半透明效果(以半透明的效果盖住图片)
<div class="box">
<img src="./img/eye.jpg" alt="">
<div class="img-mark">img</div>
</div>
css样式:
* {
padding: 0;
margin: 0;
}
.box {
width: 384px;
height: 216px;
/* 遮盖文字 */
overflow: hidden;
margin: 20px auto;
position: relative;
}
img {
width: 100%;
}
.box:hover .img-mark {
width: 384px;
height: 216px;
line-height: 216px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
position: absolute;
left: 0;
top: 0;
}
代码演示:当鼠标在图片上时会出现半透明效果
css样式也可以这样写:
.img-mark {
width: 384px;
height: 216px;
line-height: 216px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
position: absolute;
left: 0;
top: 0;
/* 透明度 */
opacity: 0;
/* css3过渡时间效果 */
transition: all 0.8s ease;
}
.box:hover .img-mark {
opacity: 1;
}
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果