JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<ul id="img_grid1">
    <li>
        <h2 class="bigimghead">Heading 1</h2>
        <img class="off" src="images/img1.jpg" alt=""/>
        <div class="copy">
            <p>some text, some text</p>
        </div>
    </li>
    <li><img class="on" src="images/img1over.jpg" alt=""/></li>
</ul>

CSS

h2.bigimghead {
    font-family: Tahoma, Geneva, sans-serif;
    position: relative;
    z-index: 2000;
    font-size: 16px;
    top: 10px;
}

img.off {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

img.on {
    position: absolute;
    left:0; 
    top: 0;
}

ul#img_grid1 li {
    list-style-type: none;
}

.copy { z-index: 5000; position: relative; width: 200px; top: 20px; }

.copy p { color: #FFF; }

JavaScript

$(document).ready(function(){
    $("img.off").hover(function() {
            $(this).stop().animate({"opacity": "0"}, "normal");
        },
        function() {
            $(this).stop().animate({"opacity": "1"}, "normal");
        });
});