JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/normalize.css">
<div class="row">
    <div class="four columns">
        <div id="crossfade">
            <img src="http://www.engagetv.com/sites/engagetv.com/files/logos/Vodafone-logo.jpg" alt="placeholder" class="top fade"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="350" height="350">
        </div>
    </div>
</div>

CSS

#crossfade {
position:relative;
}

#crossfade img.fade {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
}

#crossfade img.top:hover {
    opacity:0;
}