JSFiddle - React, Tailwind, and code Playground

HTML

<li>
    <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" />      
</li>

CSS

li {
    width: 190px;
    border: 1px solid black;
    list-style: none;
    overflow-y: hidden;
}

li img{
    width: 100%;
}

JavaScript

$("li")
    .on("mouseover", function() {
    var h = $(this).height();
    $(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
    $(this).height( h );
}).on("mouseout", function() {
    $(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});