JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<div class="container">
   <div class="visible-image">
      <img src="http://paragraphe.org/stackoverflowdemos/crossfade-images/images/green.png" alt="">
   </div>
   <div class="appearing-image center">
      <img src="http://paragraphe.org/stackoverflowdemos/crossfade-images/images/orange.png" alt="">
   </div>
</div>

CSS

.container{
    width:700px;
    margin:0 auto;
    position:relative
}
.appearing-image{
    position:absolute;
    top:100px;
    left: 0px;
    cursor:pointer
}
.visible-image{
    position:absolute;
    top:100px;
    left: 0px;
    cursor:pointer
}

JavaScript

$(document).ready(function() {        
 
  $(".appearing-image img").css("opacity",0).fadeTo(500, 0);
    $(".appearing-image img").mouseover(function () {
      $(this).fadeTo(300, 1);
    });
    $(".appearing-image img").mouseout(function () {
      $(this).fadeTo(300, 0);
    });
        
});