JSFiddle - React, Tailwind, and code Playground

by Max Lensky

HTML

<div class="block"> 
	  <img src="http://www.dartmoorprintsandgifts.co.uk/ekmps/shops/dartpack1/images/erotic-red-rose-knickers-canvas-wall-art-[4]-7209-p.jpg" alt="" />
	  <div class="hover"> 
	    <img src="http://www.dartmoorprintsandgifts.co.uk/ekmps/shops/dartpack1/images/erotic-red-rose-knickers-canvas-wall-art-[4]-7209-p.jpg" alt="" />
	  </div>
	</div>
	<div class="block"> 
	  <img src="http://images.fineartamerica.com/images-medium-large-5/3-erotic-body-part-jochen-schoenfeld.jpg" alt="" />
	  <div class="hover"> 
	    <img src="http://images.fineartamerica.com/images-medium-large-5/3-erotic-body-part-jochen-schoenfeld.jpg" alt="" />
	  </div>
	</div>
		<div class="block"> 
	  <img src="http://ecx.images-amazon.com/images/I/71XxOhziYyL._SL1500_.jpg" alt="" />
	  <div class="hover"> 
	    <img src="http://ecx.images-amazon.com/images/I/71XxOhziYyL._SL1500_.jpg" alt="" />
	  </div>
	</div>

CSS

html,body{
	height:100%;
	margin:30px;
}
.block{
	width:200px;
	height:200px;
	border:1px solid transparent;
	position:relative;
	top:20px;
	left:20px;
	z-index:1;
	float:left;
}
.block:hover{
	z-index:10;
}
.block img,.block .hover img{
	display:block;
	width:100%;
	height:100%;
}
.block .hover{
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	transition:.3s;
	-webkit-transition:.3s;
}
.block:hover .hover{
	width:340px;
	height:340px;
	margin-left:-180px;
	margin-top:-180px;
}