JSFiddle - React, Tailwind, and code Playground

HTML

Situate encima mio
<div id="bg">
<div id="thumb">
    <a href="http://www.sothebysrealty.com/eng/sales/detail/180-l-599-20665613/stunning-home-in-hpisd-dallas-tx-75225">
    <img src="http://www.sothebysrealty.com/localimagereader.ashx?ImageURL=siteresources%2Fmy%20folder%2Flittle%20boxes%20071013%2Ftx-littlebox1.jpg&BypassGlobalProxy=true" />
    </a></div>
    </div>

CSS

body{ background:#f42}
#bg{ margin-top:-100px; opacity:0;-webkit-transition: all 400ms ease-in-out;-moz-transition: all 400ms ease-in-out;-o-transition: all 400ms ease-in-out;-ms-transition: all 400ms ease-in-out;transition: all 400ms ease-in-out;  width:500px; height:500px; background:red url(http://www.sothebysrealty.com/localimagereader.ashx?ImageURL=siteresources%2Fmy%20folder%2Fhomepage%2F071013%20dallas-%20tx%2Fdallas%20image%20resized.jpg&BypassGlobalProxy=true) no-repeat center}
#bg:hover{ opacity:1; margin-top:0}
#thumb{ margin-left:20px; margin-top:100px; border:1px dashed black; float:left; }
#thumb img{ opacity:0;-webkit-transition: all 400ms ease-in-out;-moz-transition: all 400ms ease-in-out;-o-transition: all 400ms ease-in-out;-ms-transition: all 400ms ease-in-out;transition: all 400ms ease-in-out; width:100px; height:100px; display:block }
#thumb:hover img{ opacity:1}