JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<figure class="thumbnail">
  <img src="https://pimg.mycdn.me/getImage?url=http%3A%2F%2Fprozoro.info%2Fwp-content%2Fuploads%2F2016%2F10%2Fde1b9d216009be63bf5906e14e6a1313-702x336.jpg&type=WIDE_FEED_PANORAMA&signatureToken=tfLJbxj3Z3yaPuDQt_D4zA" alt="" class="thumbnail__image">
  <figcapiton class="thumbnail__title">
    <h3 class="thumbnail__header">
      Это галактика
    </h3>
    <div class="thumbnail__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus iste doloremque odit odio, debitis deleniti itaque pariatur minima laborum. Laboriosam veritatis ipsam ratione ab hic.
    </div>
  </figcapiton>
</figure>

CSS

.thumbnail{
  position: relative;
  display: inline-block;
}

.thumbnail__title{
  opacity: 0;
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  box-sizing: border-box;
  color: #fff;
  padding: 20px;
  transition: opacity 1s ease-in-out; 
}

.thumbnail__header{
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transition-delay: 0.5s; 
}

.thumbnail__text{
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transition-delay: 0.75s; 
}

.thumbnail:hover .thumbnail__header{
  opacity: 1;
}

.thumbnail:hover .thumbnail__text{
  opacity: 1;
}

.thumbnail:hover .thumbnail__title{
  opacity: 1;
}