JSFiddle - React, Tailwind, and code Playground

HTML

<p class="img_container">
    <div>
        <img border="0" src="http://img600.imageshack.us/img600/5889/img0453s.jpg" class="org">
        <img border="0" src="http://img600.imageshack.us/img600/5889/img0453s.jpg" class="clo">
    </div>
</p>

CSS

p.img_container div {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
 img.org {
    z-index: 10;
    border: 0;
}
img.clo {
    position: absolute;
    border: 0;
    z-index: 100;

    visibility: hidden;
    left: 135px; top: 135px;
    outline: 1px #FFF solid;
    width: 200px; height: 200px;

    /*filter: alpha(opacity=20);*/
    -khtml-opacity: 0.2;
    -webkit-opacity: 0.2;
    -moz-opacity: 0.2;
    -o-opacity: 0.2;
    opacity: 0.2;

    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

img.org:hover + img.clo {
    visibility: visible;
    left: 5px; top: 5px;
    outline: 5px #FFF solid;
    width: 100px; height: 100px;

    /*filter: alpha(opacity=100);*/
    -khtml-opacity: 1.0;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;
}

img.clo:hover {
    visibility: visible;
    left: 5px; top: 5px;
    outline: 5px #FFF solid;
    width: 100px; height: 100px;

    /*filter: alpha(opacity=100);*/
    -khtml-opacity: 1.0;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;
}