JSFiddle - React, Tailwind, and code Playground

by iwasrobbed

HTML

<div class="work">
    <a href="#"><img class="topLeft" src="http://i.imgur.com/JQFbb.jpg" /></a>
    <a href="#"><img class="topRight" src="http://i.imgur.com/l5OPs.jpg" /></a>
    <a href="#"><img class="bottomLeft" src="http://i.imgur.com/okxQz.jpg" /></a>
    <a href="#"><img class="bottomRight" src="http://i.imgur.com/4uPHw.jpg" /></a>
</div>

CSS

/* positioning */
img.topLeft {position: absolute; top: 0; left: 0;}
img.topRight {position: absolute; top: 0; right: 0;}
img.bottomLeft {position: absolute; bottom: 0; left: 0;}
img.bottomRight {position: absolute; bottom: 0; right: 0;}

/* element dimensions */
div.work {background-color: #ddd; height:240px; position: relative; width:300px;}
img {width:150px; height:120px; border:none;}

JavaScript

// prevent click jump
$('a').click(function() {
    return false;
});

// do work
$('img').hover(
    function(){
        console.log( "mouseEnter" );
        var $that = $(this);
        $(this).parent().siblings('a').animate({opacity: 0},function() {
            $that.animate({
                width: "300px",
                height: "240px"
            });
        });
    },
    function(){
        console.log( "mouseLeave" );
        var $that = $(this);
        $(this).animate({
            width: "150px",
            height: "120px"
        }, 1500, function () {
            $that.parent().siblings('a').animate({opacity: 1});
        });
    }        
);