JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
  <div class="row" style="margin-top:10px;">
    <div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10  " id="test">
      <img src="https://images.unsplash.com/photo-1489402954857-207e3f591c0f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=045f0d8cd3eb1bd9d844697309778067&auto=format&fit=crop&w=750&q=80" id="image_master" class="background img-responsive" style="border: 4px solid lightgrey;">
      <img src="https://images.unsplash.com/pho-1517392296186-b65cf360fa3b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=37bba5e6484bbc480acc3ca1c67fd1c4&auto=format&fit=crop&w=750&q=80" id="overlay2" class="overlay img-responsive">
    </div>
    </div>
    </div>

CSS

#test{
    position: relative;
      width: 100%; 
}
.background { 
  width: 100%; 
  z-index: 1;
}

.overlay {
  position: absolute;
  left:0;
  top:0;
  width: 100%; 
  z-index: 2;
  
  opacity: 0.6;
  
}