JSFiddle - React, Tailwind, and code Playground

by bkbarton

HTML

<div class="image">
    <div class="linkWords"><h2>Title of this link.</h2><h5>subject</h5></div>
    <img src="#" width="100px" height="100px"/>
</div>

<div class="image">
    <div class="linkWords"><h2>Title.</h2><h5>subject</h5></div>
    <img src="#" width="100px" height="100px"/>
</div>

<h1>hi</h1>
<h2>hi</h2>
<h3>hi</h3>
<h4>hi</h4>
<h5>hi</h5>

CSS

.image{
    width:100px;
    height:100px;
    overflow:hidden;
    pointer:cursor;
}

.linkWords{
    width:95px;
    height:60px;
    position:absolute;
    background-color:#999;
    /*opacity:0.8;*/
    display:none; 
    z-index:100;
    padding:40px 0 0 5px;
    color:white;
    line-height:1.2em;
}

h2{
    font-size:1.3em;   
}
h5{
    font-size:0.8em;   
}

JavaScript

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});