JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cf">
    <img class="bottom" src="http://i.imgur.com/qiupijw.png">
    <img class="top" src="http://i.imgur.com/IAUlHar.png">
</div>

CSS

#cf img:hover {
    transform: scale(0.75);
    transition: 0.25s ease;
}
#cf {
    position:relative;
    margin:0 auto;
}
#cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    transition: 0.25s ease;
}
#cf img.top {
    -webkit-transition: opacity 1s ease-in-out;
    -webkit-animation: fade 5s infinite;
    transition: 0.25s ease;
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}