JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<a href="#" class="foo">
    <img src="http://imworld.aufeminin.com/dossiers/d20080129/d3136i67245h172416.jpg" alt="bar" />
</a>

CSS

.foo {
    display:inline-block;
    position:relative;
    z-index:4;
}

.foo img {
    display:block   
}

.overlay {
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
    background:#000;
    z-index:5;
}

JavaScript

//jQuery hover-image

$('.foo').each(function() {
    $(this).prepend('<div class="overlay" />');
    $('.overlay').css({opacity:0});
    $(this).hover(function() {
        $('.overlay', this).stop().animate({
            opacity: 0.3
        }, 250);
    }, function() {
        $('.overlay', this).stop().animate({
            opacity: 0
        }, 250);
    });
});