JSFiddle - React, Tailwind, and code Playground

by alano

HTML

<div class="game" style="position:relative; width:470px; height:300px; margin-bottom:10px; border:1px solid #666;">


<div class="description">
<p>Some text here</p></div>

<img src="http://www.bestmmogames.org/sites/bestmmogames.org/files/styles/medium/public/wotartwork.jpg" data-alt="http://www.bestmmogames.org/sites/bestmmogames.org/files/styles/medium/public/wot1.jpg">

  </div>

CSS

.description {
    font:10px 'trebuchet ms', geneva, Arial;
    display:none;
    position:absolute;
    bottom:30px;
    right:0px;
    width: 80%;
    background: black;
    color:white;
    
}

JavaScript

// this function is for the image caption
$(window).load(function() {
    $('div.game').hover(function() {
        //when mouse hover over the wrapper div
        //get it's children elements with class description '
        //and show it using fadeTo
        $(this).children('.description').stop().fadeTo(500, 0.8);
    }, function() {
        //when mouse out of the wrapper div
        //use fadeTo to hide the div
        $(this).children('.description').stop().fadeTo(500, 0);
    });

});

// this function is for the rollover
$(function() {
    $('img[data-alt]').each(function() {
        var image = $(this).attr('src'),
            alternate = $(this).data('alt')
            $(this).on({
                mouseenter: function() {
                    $(this).attr(src, image);
                },
                mouseleave: function() {
                    $(this).attr(src, alternate);
                }
            });
    })
})