JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<a href="/">
<img src="http://lorempixel.com/400/400/cats/">
<div class="refect">
  <img src="http://lorempixel.com/400/400/cats/" >
</div>
<span>喵喵喵喵</span>
</a>

SCSS

a {
  border: 5px solid green;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  > img {
    position: absolute;
    height: 70%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    
    
  }
  
  span {
    position: absolute;
    width: 100%;
    bottom: 0%;
    text-align: center;
    z-index: 3;
    margin-bottom: 5px;
    color: black;
    font-weight: bold;
    font-size: 30px;
  }
  
  div.refect {
    position: absolute;
    height: 70%;
    left: 50%;
    // 70 * 0.9 = 63%
    top: calc(63%);
    transform: scaleY(-0.9) translateX(-50%);
    filter: blur(3px);
    z-index: 1;
    
    img {
      height: 100%;
    }

    &::after {
      display: block;
      position: relative;
      background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0, #fff 30%);
      height: 100%;
      width: 100%;
      margin-top: -100%;
      content: '';
    }
  }
}