JSFiddle - React, Tailwind, and code Playground

by alinktothepast

HTML

<div class="section">
</div>
<div class="fade">
<img src="http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/mount-roraima-60896-xl.jpg" />
</div>

CSS

body
{
background: #FFF;
}
.fade, .section
{
    position:absolute;
    opacity:1.0;
}
/*
body
{
    background-color: #000;
}
.pics
{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 300px;
    height: 300px;
    margin: 0px;
    border: solid 1px #FFF;
}

img
{
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    opacity:1.0;
}
/*

JavaScript

(function() {

    $('.section').on('mouseenter', function() {

        $('.fade').fadeOut();
        
    }).on('mouseleave', function() {

        $('.fade').fadeIn();        
        
    });

}());