JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<a class="nowandthen">
	<img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
	<img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt=""></a>

CSS

a.nowandthen {
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}

a.nowandthen img {
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}


a.nowandthen img:nth-of-type(2) {
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1) {
clip: rect(0,0,434px,0);
opacity: 0;
}

a.nowandthen.alt {
width: 300px; 
height: 354px; 
}

a.nowandthen.alt img { 
clip: rect(0,300px,354px,0);
}

a.nowandthen.alt:hover img:nth-of-type(1) {
clip: rect(0,0,354px,0);
}