JSFiddle - React, Tailwind, and code Playground

by robx

HTML

<div class="container">
    <div class="rollover a">
        <img src="http://www.gravatar.com/avatar/9b522de0d81b5e9b9fe721b151cbfbc3?s=32&d=identicon&r=PG" alt="Hello" />
    </div>
    
    <div class="rollover b">
        <img src="http://www.gravatar.com/avatar/9b522de0d81bfdsdf51cbfbc3?s=32&d=identicon&r=PG" alt="Hello" />
    </div>
    
    <div class="rollover c">
        <img src="http://www.gravatar.com/avatar/9b522de0d81b5e9bdfsdfsfdcbfbc3?s=32&d=identicon&r=PG" alt="Hello" />
    </div>
</div>

<div class="container">
    <div class="rollover a">
        <img src="http://www.gravatar.com/avatar/9b522de0d81b5e9b9fe721b151cbfbc3?s=32&d=identicon&r=PG" alt="Hello" />
    </div>
    
    <div class="rollover b">
        <img src="http://www.gravatar.com/avatar/9b522de0d81bfdsdf51cbfbc3?s=32&d=identicon&r=PG" alt="Hello" />
    </div>
    
    <div class="rollover c">
        <img src="http://www.gravatar.com/avatar/9b522de0d81b5e9bdfsdfsfdcbfbc3?s=32&d=identicon&r=PG" alt="Hello" />
    </div>
</div>

CSS

.rollover {
    position: relative; 
    float:left; 
}

.rollover div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.a div {
    background: red;   
}

.b div {
    background: yellow;   
}

.c div {
    background: blue;   
} 
.container{
    clear:both;
    margin:5px;
    border:1px solid #000;
    float:left;
}

JavaScript

$(function() {
    $('.rollover').each(function() {

        var div = $('<div />').appendTo(this);

        $(this).hover(function() {
            div.fadeOut(500);
        }, function() {
            div.fadeIn(500);
        });

    });
});