css图片悬浮在图片上

在网页设计中，图片是一个非常重要的元素，不仅能增加页面的美观程度，而且还能吸引用户的注意力。然而，传统的图片展示方式显得单调无味，我们需要使用一些新的技巧来实现更加炫酷的视觉效果。

img {
  position: relative;
}
img:hover:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0.7);
  transition: opacity 0.3s ease-out;
}
img:hover:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75px;
  height: 75px;
  margin: -37.5px 0 0 -37.5px;
  background: url("icon-play.png") no-repeat center center;
  background-size: 50%;
}

上面的代码使用了CSS伪元素来实现图片悬浮时的效果。其中，:before伪元素用于显示一个播放图标，:after伪元素用于添加半透明的遮罩层。

实现这种效果的关键在于将图片的position属性设置为relative，这样才能让:before和:after伪元素相对于图片定位。

同时，我们还需要使用transition属性来添加渐变效果，这样图片悬浮时才不会出现突兀的感觉。

通过使用这种技巧，我们可以让网页中的图片更加生动有趣，给用户带来更好的浏览体验。