JSFiddle - React, Tailwind, and code Playground

by CreativeDreams

HTML

<section>
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1465126188505-4f04a0f23a4d?w=1550&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta iisque ex
      </div>
    </div>
  </article>
  
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1506512534708-3737d46bffe1?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta iisque ex
      </div>
    </div>
  </article>
  
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1508144322886-717c284ab392?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta iisque ex
      </div>
    </div>
  </article>
  
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1498857006179-0ab79e24640b?w=934&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta iisque ex
      </div>
    </div>
  </article>
  
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1478728073286-db190d3d8ce6?w=1568&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta iisque ex
      </div>
    </div>
  </article>
  
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1503924087716-07cbd5f49b21?w=1000&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta iisque ex
      </div>
    </div>
  </article>
  
  <article>
    <div class="article-inner">
      <img src="https://images.unsplash.com/photo-1505996424130-f5d15d9fd52a?w=934&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">

      <div class="content">
        Option senserit vis ne, nec soluta...

SCSS

section {
  display: flex;
  flex-wrap: wrap;
  width: 1140px;
  margin: 50px auto;
  
  article {
    overflow: hidden;
    width: 33.333%;
    height: 400px;
    font-family: Helvetica Neue;
    color: #fff;
    
    .article-inner {
      position: relative;
      height: 100%;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
      }

      &:after {
        opacity: 0;
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(43, 43, 54, 0.6);
        transition: opacity 0.4s ease;
      }

      .content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
			  transform: translate3d(0, 50px, 0);
			  transition: opacity 0.4s ease,
						        transform 0.4s ease;
      } 
    }
    
    &:hover {
      .article-inner {
        img {
          transform: scale3d(1.05, 1.05, 1);
        }
        
        &:after {
          opacity: 1;
        }
        
        .content {
          opacity: 1;
				  transform: translate3d(0, 0, 0);
        }
      }
    }
  }
}