JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<article>
    <img src="http://placekitten.com/g/200/300" alt="">
    <div class="post-info">Post Info</div>
</article>

CSS

article { background: #e1e1e1; }

.post-info { display: none; }

JavaScript

$('article').on("mouseenter mouseleave", function( e ) {

    var mouseenter = e.type === "mouseenter",
        $this = $(this),
        img = $this.children('img'),
        postInfo = $this.children('.post-info');

    var imgFade = mouseenter ? 0.4 : 1,
        postInfoFade = mouseenter ? 'fadeIn' : 'fadeOut';
    
    img.stop().fadeTo( 500, imgFade );
    postInfo.stop()[ postInfoFade ]( 500 );
    
});