JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Credit: <a href="http://vintageairphotos.com/bo-56-400/">http://vintageairphotos.com/bo-56-400/</a> and
<a href="http://forum.skyscraperpage.com/showpost.php?p=5816543&postcount=36">http://forum.skyscraperpage.com/showpost.php?p=5816543&postcount=36</a><br>
Hover over image to see new vs old.
</p>
<div id="container">
<img src="http://farm9.staticflickr.com/8436/7897672218_f4a5e2e8ce_z.jpg" id="old">
<img src="http://farm9.staticflickr.com/8042/7897672790_ba1a02eb21_z.jpg" id="new">
</div>

CSS

body {
   font-family: arial;
   font-size: 10px;    
}

#container {
    position: relative;
}
#old, #new {
    position: absolute;
    top: 0    
}
#old {
    z-index: 10;    
}

JavaScript

$("#container").bind("mouseenter", function() { $this = $("#old"); $this.css("z-index",0); });
$("#container").bind("mouseleave", function() { $this = $("#old"); $this.css("z-index",10); });