JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>

<div id="expandingbox"> 
    <img src="http://jsfiddle.net/img/top-bg.png" height ="260px" width="200px" />
</div>

CSS

#expandingbox {
    position: relative;
    width: 200px;
    height: 260px; }
#expandingbox img {
    position: absolute;
    height: 700px;
    bottom: 0px; }
#expandingbox.hover{ height: 300px; }
#expandingbox.expanded{ height: 500px; }

JavaScript

$('#expandingbox').hover(
    /*on mouseenter*/
   function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).addClass("hover", "slow");
    }
},
    /*on mouseout*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).removeClass("hover", "slow");
    }
}).click(function() {
    $(this).toggleClass("expanded", "slow");
});