JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div id="item1">

<img src="http://cartersloope2.robertgfrancis.com/wp-content/uploads/2012/07/Waterbw.jpg" class="a">

<img src="http://cartersloope2.robertgfrancis.com/wp-content/uploads/2012/07/Water.jpg" class="b">

<p class="overlay">Water</p>

</div>

CSS

#item1 {
      position: relative; /* Important */
      float:left;
      width: 457px;
      height:150px;
      margin-right:8px;
      background-color:#ccc;
      margin-bottom:15px;
        }

img.a {
      position: absolute; /* Important */
      left: 0;
      top: 0;
      z-index: 10;
        }
 
img.b {
      position: absolute; /* Important */
      left: 0;
      top: 0;
      }

p.overlay {
      position: absolute; /* Important */
      font-size:36px;
      font-weight:700;
      z-index: 15;
      padding-left:10px;
      }

JavaScript

$(document).ready(function() {
    $("img.a").hover(

    function() {
        $(this).stop().animate({
            "opacity": "0"
        }, "1000");
        $(this).parent().find("p.overlay").stop().animate({
            "font-size": "12px"
        },1000);
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, "1000");
        $(this).parent().find("p.overlay").stop().animate({
            "font-size": "36px"
        },1000);
    });
});