纯css实现图片

展示特效

可以使用CSS3的transform属性和transition属性来实现图片展示特效。

首先需要给图片添加一个hover样式，用来触发展示特效：

.img-container:hover .img-overlay {
  transform: scaleY(1);
  transition-delay: 0.3s;
}

这里使用了类选择器来选中图片容器，并在其中嵌套了一个遮罩层元素。遮罩层元素默认状态下不可见，当鼠标悬停在图片容器上时，通过transform属性将其高度从0变为100%。

为遮罩层元素添加样式：

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.3s ease-in-out;
}

这里使用了绝对定位将遮罩层元素放置在图片容器的上方，并设置其宽度为100%，高度为0，背景色为半透明黑色。transform-origin属性设置了变换的起点为底部，避免遮罩层从顶部往下展开。transition属性指定了变换效果及时长。

完整的CSS样式代码：

.img-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-container:hover .img-overlay {
  transform: scaleY(1);
  transition-delay: 0.3s;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.3s ease-in-out;
}

HTML代码：

<div class="img-container">
  <img src="https://picsum.photos/300/200">
  <div class="img-overlay"></div>
</div>
``