JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<ul class="columns" style="clear:both">
    <li>
        <a href="#"><img src="http://img217.imageshack.us/img217/7350/tanktp.jpg" alt="Tank" width="300px" height="362px"/></a>
        <div class="info">
            <h2>Tank</h2>
            <p>These have very high health and high armor. They do not do much damage however. They are meant to draw aggro* from monsters while the mages kill them.</p>
        </div>
    </li>
    <li>
        <a href="#"><img src="http://img714.imageshack.us/img714/9505/priestc.jpg" alt="Priest" width="300px" height="362px"/></a>
        <div class="info">
            <h2>Priest</h2>
            <p>Designed to heal the Tank to keep it alive.</p>
        </div>
     </li>
</ul>

CSS

/*--Column Styles--*/
ul.columns {
    width: 960px;
    list-style: none;
    margin: 0 auto; 
    padding: 0;
}
ul.columns li {
    width: 300px;
    float: left; 
    display: inline;
    margin: 10px; 
    padding: 0;
    position: relative;
}
ul.columns li:hover {z-index: 99;}

/*--Thumbnail Styles--*/
ul.columns li img {
    position: relative;
    border-style: none;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    z-index: 999;
}
        
/*--Details Style--*/
ul.columns li .info {
    position: absolute;
    left: -10px; top: -10px;
    padding: 372px 10px 20px;
    width: 300px;
    background: white;
    color: black;
    font-size: 1.2em;
    border-style: solid;
    border-width: medium;
    border-color: black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }
ul.columns li h2 {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin: 0; 
    padding: 10px 0;
    }
ul.columns li p {
    padding: 0; 
    margin: 0; 
    font-size: 0.9em;
    text-align: center;
    }

JavaScript

$(function(){
    $("ul.columns li img").fadeTo(0, 0.3);
    $("ul.columns li div.info").fadeTo(0, 0);

    $("ul.columns li img").each(function()
    {
        var isFadedIn = false;
        var isFadedOut = false;
        var isMouseOver = false;
        var onMouseOver, onMouseOut;
        onMouseOver = function()
        {
            if(isFadedIn || isFadedOut){
                return;
            }
            isFadedIn = true;
            $(this).fadeTo(1000, 1.0, function()
            {
                isFadedIn = false;
                if(!isMouseOver){
                    onMouseOut.call(this);
                }
            });
            $(".info", $(this).closest("li")).fadeTo(600, 1);
        };
        onMouseOut = function()
        {
            if(isFadedIn || isFadedOut){
                return;
            }
            isFadedOut = true;
            $(this).fadeTo(500, 0.3, function()
            {
                isFadedOut = false;
                if(isMouseOver){
                    onMouseOver.call(this);
                }
            });
            $(".info", $(this).closest("li")).fadeTo(400, 0);
        };
        $(this).hover(function()
        {
            isMouseOver = true;
            onMouseOver.call(this);
        }, function()
        {
            isMouseOver = false;
            onMouseOut.call(this);
        });
    });
});