JSFiddle - React, Tailwind, and code Playground

by zinyosrim

HTML

<div class="tile-group">
<div class="tile">
  <img src="//cdn.shopify.com/s/files/1/1011/6932/t/20/assets/homepage_feat_img_1.jpg?8078507906660611670" />
  <div class="overlay">
    <div class="inner">
      	Title   
        </div>
		<div class="cta-image">
      		<img src="//cdn.shopify.com/s/files/1/1011/6932/t/20/assets/lotos.png?8078507906660611670" />
		</div>
    <div class="cta-text">
      		CTA
    </div>
    </div>
  </div>
</div>
<div class="tile">
  <img src="//cdn.shopify.com/s/files/1/1011/6932/t/20/assets/homepage_feat_img_1.jpg?8078507906660611670" />
  <div class="overlay">
    <div class="inner">
      	Title   
		<div class="cta-image">
      		<img src="//cdn.shopify.com/s/files/1/1011/6932/t/20/assets/lotos.png?8078507906660611670" />
		</div>
      	<div class="cta-text">
      		CTA
    	</div>
    </div>
  </div>
</div>
</div>

CSS

.tile-group {
  position: relative;
  overflow: hidden;
  .tile { display: none; }
  .tile.loaded {
    position: absolute;
    display: block;    
  }
  img {
    width: 100%;
  }
  a {
    display: block;
    }
  }
  .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-left: -5px;
    }
    .inner {
      @extend h4;
      color: red;
      margin: 0;
      padding: 0;
      display: inline-block;
      vertical-align: middle;
      width: auto;
      padding: 20px 25px;
      }
      .cta-text{
        width: 30%;
        position: absolute;
        font-size:24px;
        left:35%;
        bottom: 5%;
       	text-transform: uppercase; 
      }
      .cta-image{
        width: 30%;
        position: absolute;
        left: 35%;
        bottom: 10%;
      }
    }
  }

}