JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSQFgGQwqHUWTA3Vxy0XbpIPucL_gtSbRtdhbNpWDVx9ap-WmIMlA" alt="" width="100%" /></a></li>
    <li><a href="#"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRYcQQkr1Ftuj6emK1w8_kRFUwRUGHORfdRuFsKd2Xc6fCj1ZM2" width="100%" alt="" /></a></li>
    
</ul>

CSS

ul { list-style: none; padding: 0; margin: 0; }
ul li { width: 400px; height: 150px; overflow: hidden; position: relative;z-index:10; }
ul li img {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index:10;
}
ul li:first-child img {
    top:0;
}

JavaScript

$(document).ready(function () {
            $("ul li").bind({
                mouseenter: function(){
                    $(this).css({
                        "overflow":"visible",
                        "z-index": "9"
                    });
                    $(this).siblings().find("img").stop(true,true).fadeOut();
                },
                mouseleave: function(){
                    $t = $(this);
                    $t.css({
                        "z-index": "9"
                    });
                    $t.siblings().find("img").stop(true,true).fadeIn(function(){
                        $t.css({
                            "overflow":"hidden",
                            "z-index":"10"
                        });
                    });
                }
            });
        });