<div class="container">
  <div class="shots">
    <div class="shot shot-1"></div>
    <div class="shot shot-2 active"></div>
    <div class="shot shot-3"></div>
  </div>
</div>

.container {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.shots {
  margin-top:3em;
  margin-bottom:3em;
  position:relative;
  text-align:center;
}
.shot {
  position:relative;
  display:inline-block;
  width:30%;
  height:0;
  padding-bottom:50%;
  transform:scale(1,1);
  transition:all 0.3s;
  z-index:1;
  opacity:0.8;
}
.shot-1 {
  background-color:blue;
}
.shot-2 {
  background-color:red;
}
.shot-3 {
  background-color:green;
}
.shot.active {
  transform:scale(1.2,1.2);
  z-index:2;
  opacity:1;
}

$(".shot")
.on("mouseenter",function(){
  $(this).addClass("active")
    .siblings().removeClass("active");
})
$(".shots")
.on("mouseleave",function(){
  $(".shot.active").removeClass("active")
  $(".shot").eq(1).addClass("active");
})