hover fiddle attempt 2

by Akshay Sharma

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="holder">
  <div class="hero" id="first">
  
  </div>
  <div class="hero" id="second">
  
  </div>
  <div class="hero" id="third">
  
  </div>
  <div class="hero" id="fourth">
  
  </div>
</div>

CSS

.holder{
  margin-top:10vh;
  margin-left: 10vw;
  width:90vw;
  height:90vh;
  position:relative !important;
  z-index:0;
}
.hero{
  height:100%;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  width:20%;
  display:inline-block;
  z-index: 0;
  position:relative !important;
}

#first{
background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}
#second{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}
#third{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}
#fourth{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover{
  z-index:1000 !important;
  width:27vw;
  cursor:pointer;
  
}