JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="item" style="background-image: url('http://lorempixel.com/400/200/sports/1/')">
  <div class="item__content">
    <div class="item__content__title">Crafters Ode</div>
    <div class="item__content__type">Art</div>
  </div>
  
</div>

<div class="item" style="background-image: url('http://lorempixel.com/400/200/sports/2/')">
  <div class="item__content">
    <div class="item__content__title">Crafters Ode</div>
    <div class="item__content__type">Art</div>
  </div>
  
</div>

<div class="item" style="background-image: url('http://lorempixel.com/400/200/sports/3/')">
  <div class="item__content">
    <div class="item__content__title">Crafters Ode</div>
    <div class="item__content__type">Art</div>
  </div>
  
</div>

SCSS

$itemwidth: 50%;
$itemheight: 200px;

.item {
  font-family: sans-serif;
font-size: 18px;
float: left;
  width:$itemwidth;
  min-width: $itemheight;
  height: $itemheight;
  background: black;
  color: white;
  display:flex;
  align-items:center;
  text-align: center;
  background: no-repeat center center; 
  background-size: fill;
  
  
  &__content {
    
    width: 100%;
    
    &__title {
      
    position: relative;
      text-align:center;
                        transition: all 0.3s ease;

      
      &:after,  &:before {
        width: 70px;
        display:block;
        content: '';
        background:white;
        height: 1px;
        transform: rotate(0deg);
                  transition: all 0.3s ease;
position: absolute;
bottom: 0;
left: calc(50% - 35px);
      }
    }
    
    &__type {
      opacity: 0;
      max-height: 1px;
          transition: all 0.3s ease;
          font-size: 0.8rem;
    }
  }
   &:hover {
      .item__content__title {
      
      margin-bottom: 20px;
        padding-bottom: 20px;
      
        &:after {
                         transform: rotate(20deg);

        }
         &:before {
                         transform: rotate(-20deg);

        }

      }
      .item__content__type {
        max-height: 30px;
        opacity: 1;
      }
      
    }
}