JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="product">
  <a href="#" class="thumb">
    <img src="http://lorempixel.com/400/200" alt="">
  </a>
  <div class="caption">
    <span class="btn btn-add">Add To Cart</span>
  </div>
</div>

SCSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 5%;
}

.product {
  display: inline-block;
  position: relative;
  z-index: 1;
  
  .thumb {
    & > img {
      display: block;
      max-width: 100%;
    }
  }
  
  .caption {
    font-size: 12px;
  
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    
    background: rgba(0,0,0, 0.5);
    opacity: 0;   
    transition: opacity 200ms ease;
    cursor: pointer;
    
    .btn {
      display: block;
      padding: 8px 16px;
      
      background: #333;
      border: 1px solid #fff;
      color: #fff;
      text-align: center;
      cursor: inherit;
      text-transform: uppercase;
    }
  }
  
  &:hover {
    .caption {
      opacity: 1;
    }
  }
}