<div class="balochdesign">
  <img class="ax1" src="http://lorempixel.com/200/200" />
  <img class="ax2" src="http://lorempixel.com/200/200/sports" />
</div>
.balochdesign{
  width:200px;
  height:200px;
  position:relative;
  overflow:hidden;
}
.balochdesign img{
  transition:2s all;
  position:absolute;top:0px;
  width:100%;
}
.ax1{z-index:2;}.ax2{z-index:1;}
.balochdesign:hover .ax1{
  opacity:0;
}
Rerun