CSS中如何点击放大图片?实现这个功能的方法有很多,下面介绍其中一种。/* 首先,给图片所在的父元素设置相对定位 */ .parent { position: relative; } /* 再给图片设
CSS中如何点击放大图片?实现这个功能的方法有很多,下面介绍其中一种。
/* 首先,给图片所在的父元素设置相对定位 */
.parent {
position: relative;
}
/* 再给图片设置绝对定位 */
.img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: all 0.3s;
}
/* 添加一个放大效果的样式 */
.img:hover {
transform: scale(1.2);
z-index: 2;
}
/* 给图片添加一个遮盖层 */
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.3s;
}
/* 添加鼠标悬浮遮盖层的效果 */
.parent:hover .mask {
opacity: 1;
z-index: 2;
}
/* 最后,将文字放置于遮盖层上面 */
.mask p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
通过以上代码,当鼠标悬浮在图片上时,图片会放大,同时出现一个遮盖层,上面显示文字(比如图片描述、作者等)。当鼠标离开时,图片会还原原来的大小,并隐藏遮盖层。
粉丝
0
关注
0
收藏
0