JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#"><img src="http://www.uberpiglet.com/images/VectorBackgrounds11.jpg" alt="" /></a></li>
    <li><a href="#"><img src="http://www.uberpiglet.com/images/VectorBackgrounds11.jpg" alt="" /></a></li>
</ul>

CSS

ul { list-style: none; padding: 0; margin: 0; }
ul li {
    width: 450px; height: 216px; overflow: hidden; position: relative;
}
ul li img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$(function() {
    $("ul li a img").each(function() {
        var $this = $(this);
        
        // Hackery to get the real image dimensions
        $("<img/>")
            .attr("src", $this.attr("src"))
            .load(function() {
                var $rollover = $("<div>&nbsp;</div>").css({
                    'background': 'url(' + $this.attr('src') + ') bottom left',
                    'width': this.width,
                    'height': this.height / 2,
                    'text-indent': '-9999px'
                }).insertAfter($this);
        
                $this.mouseover(function() {
                    $this.fadeOut();
                    $rollover.fadeIn();
                });
                
                $rollover.mouseout(function() {
                    $this.fadeIn();
                    $rollover.fadeOut();
                });
            });
    });
});