[分享]css中如何点击放大图片

CSS中如何点击放大图片？实现这个功能的方法有很多，下面介绍其中一种。/ 首先，给图片所在的父元素设置相对定位 / .parent { : relative; } / 再给图片设置绝对定位 / .im...

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;
}

通过以上代码，当鼠标悬浮在图片上时，图片会放大，同时出现一个遮盖层，上面显示文字（比如图片描述、作者等）。当鼠标离开时，图片会还原原来的大小，并隐藏遮盖层。