JSFiddle - React, Tailwind, and code Playground

HTML

Hover that:<br>

<p>
    <a href="#">
        <span style="height: 100%">
                 
        </span>
    </a>
</p>
<p>
    <a href="#">
        <span style="height: 200%">
            
        </span>
    </a>
</p>
<p>
    <a href="#">
        <span style="height: 300%">
            
        </span>
    </a>
</p>

CSS

p {
    margin: 0;
    display: inline-block;
    border: solid 10px green;
}
a {
    display: block;
    overflow: hidden;
    width: 91px;
    height: 91px;
    position: relative;
}
a span{
    background: url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
}
a:hover {
    width: 120px;
    height: 120px;
}