Paste the CSS into the page Head Code box...

<style type="text/css">
.crossfade img {
position:absolute;
left:0;
opacity:1;
width:100%;
height:auto;
margin:0;
padding:0;
border:none;
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out
}
.crossfade.top img {
width:100%;
height:auto;
margin:0;
padding:0;
border:none} .crossfade img.top:hover{opacity:0}
</style>

Both images need to be imported at the same width and height. Enter these dimensions into the code below.
Paste the relative path to the images into the code to replace bottom-image.jpg and top-image.jpg

Paste the HTML into an HTML Snippet...

<figure class="crossfade" style="position:relative;width:640px;height:480px;margin:0 auto">
<img src="bottom-image.jpg" />
<img class="top" src="top-image.jpg" />
</figure>