JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<div class="block">
    <img src="http://www.afterartnews.com/wp-content/uploads/lettrines/A.jpg" class="top">
    <img src="http://4.bp.blogspot.com/_6iT1qarAdSQ/RYhkIejYSrI/AAAAAAAAACc/fMY5L3PC5sI/s320/Letter-B-260.jpg" width="44px" height="49px">
</div>
<br/>
<div class="block">
    <img src="http://www.afterartnews.com/wp-content/uploads/lettrines/A.jpg" class="top">
    <img src="http://4.bp.blogspot.com/_6iT1qarAdSQ/RYhkIejYSrI/AAAAAAAAACc/fMY5L3PC5sI/s320/Letter-B-260.jpg" width="44px" height="49px">
</div>

CSS

.block {
    border: 1px black solid;
    padding:5px;
    width: 95px;
}

JavaScript

// Hide on load:
$('.block').children('img.top').animate({opacity:0},800);

// When a div with the class block is hovered over:
$('.block').hover(
    // Hovering:
    function() {
        // Show the image:
        $(this).children('img.top').animate({opacity:1},800);    
    },
    // Mouse left:
    function() {
        // Hide again:
        $(this).children('img.top').animate({opacity:0},800);    
    }
);