hover fiddle attempt 2

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>
With z-index :
<div class="holder">
  <div class="hero zi" id="first">
  
  </div>
  <div class="hero zi" id="second">
  
  </div>
  <div class="hero zi" id="third">
  
  </div>
  <div class="hero zi" id="fourth">
  
  </div>
</div>

Without z-index :
<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;
}
.hero{
  height:100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width:20%;
  display:inline-block;
  transition: transform 2s, z-index 2s;
}
.hero.zi{
  position:relative;
  z-index: 0;
}
#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{
  cursor:pointer;
  transform: scale(1.5);
}

.hero.zi:hover{
  z-index: 1000;
}