图片倒影

HTML

<div class="box">
  <img src="img/pic.png" alt="140x150">
</div>

CSS

.box {
  position: relative;
} 

/* 设置镜像，作倒影 */
.box::after {
  content: url(img/pic.png);
  display: block;
  /* 垂直翻转图片作镜像 */
  transform: scaleY(-1);
  /* 虚化镜像 */
  opacity: .5;
}

/* 在镜像上盖一层渐变遮罩，作倒影逐渐消失的效果 */
.box::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 150px;
  /* 取box的背景色作终止色 */
  background: linear-gradient(transparent, #fff);
  /* 提高层级，让:before盖到:after上 */
  z-index: 1;
}

.box img {
  /* 调整原图和倒影的距离 */
  margin-bottom: 5px;
}