JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<nav>NAVIGATION HERE</nav>
<div class="mask-holder" style="height:80vh">
  <div class="mask-container">
    <div class="bw-image"></div>
    <img src="https://www.thanet-web-design.com/mask/colour.jpg?3"style="width:100%"alt="img">
  </div>
</div>
<section class="container-fluid flex-intro"  >
  <div class="row" >
  
  <div class="col-md-4">
    <h1>
      Welcome here
    </h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
  </div>
  <div class=" mask-hide">
    <div class="mask-container">
    <div class="bw-image"></div>
    <img src="https://www.thanet-web-design.com/mask/colour.jpg?3"style="width:100%"alt="img">
  </div>
  </div>
  </div>
</section>

CSS

/* FRONT PAGE MASK EFFECT */
.mask-holder{width:100%;z-index:-1; position:absolute;bottom:0;right:0}
.mask-container {position: relative;width:100%}
.mask-hide{display:none}
.bw-image {position: absolute;inset: 0;background-image: url("https://www.thanet-web-design.com/mask/bw.jpg?6");background-size:100% auto;-webkit-mask-image: url("https://www.thanet-web-design.com/mask/mask.png");-webkit-mask-size: cover;-webkit-mask-position: 0% 0%;mask-image: url("https://www.thanet-web-design.com/mask/mask.png");mask-size: cover;mask-position: 0% 0%;transition: -webkit-mask-position;} 
.flex-intro{ height:clamp(60vh, calc(100vw*.5),calc(90vw*.5)); display:flex; align-items:center;}
.mask-animation {animation:addColor 1.5s steps(24) forwards;}

@keyframes addColor {
0% {-webkit-mask-position: 0% 0%;mask-position: 0%  0%;}
100% {-webkit-mask-position: 100% 0%;mask-position: 100% 0%;}
}

JavaScript

$(document).ready(function(){ 
   setTimeout(function() { 
        $('.bw-image').addClass('mask-animation');
    }, 2000);
})