CSS & JS Effect – Image 倒影框

效果

Step1: HTML 结构

<div class="image">
  <img src="./images/img-2.png" />
</div>

需要 wrap 一层 div, 因为倒影框使用 :after content 实现的, 而 img 是用不了 :after 的. 所以需要 wrapper 一层.

Step2: 图片居中

.image {
  width: 50%; /*设定 container 大小*/
  margin-inline: auto; /* container 居中 */

  img {
    width: 100%; /* 控制图片大小 */
    vertical-align: bottom;
  }
}

为什么需要 vertical-align 可以看看这篇 <img> extra 4px at the bottom 的部分.

效果

Step 3: 做框

.image {
  position: relative;
  &::after {
    content: "";
    width: 92.5%;
    height: 92.5%;
    border: 8px solid red;

    position: absolute;
    top: 10%;
    left: -10%;
    z-index: -1;
  }
}

和做 image overlay 技巧差不多.

效果

还不美, 因为图片少了白框.

Step 4: 图片加白边框

最终 CSS

.image {
  width: 50%; /*设定 container 大小*/
  margin-inline: auto; /* container 居中 */

  img {
    width: 100%; /* 控制图片大小 */
    vertical-align: bottom;

    border: 8px solid white; /* 白框 */
  }

  position: relative;
  &::after {
    content: "";
    width: 92.5%;
    height: 92.5%;
    border: 8px solid red;

    position: absolute;
    top: 10%;
    left: -10%;
    z-index: -1;
  }
}

效果