JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
    <img src="http://dummyimage.com/150x200/00F/FFF.png" alt="Lorem ipsum" />
    <img src="http://dummyimage.com/150x200/F00/FFF.png" alt="" />
</a>

CSS

a
{
    display: inline-block;
    overflow: hidden;
    height: 200px;
}
a img
{
    display: block;
}
a img:first-child
{
    -webkit-transition: margin-top 300ms linear;
       -moz-transition: margin-top 300ms linear;
        -ms-transition: margin-top 300ms linear;
         -o-transition: margin-top 300ms linear;
            transition: margin-top 300ms linear;
}
a:hover img:first-child,
a:focus img:first-child
{
    margin-top: -200px;
}