JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<a class="thumbnail">
    <img src="http://randolph.k12.nc.us/schools/whs/buttons/teal-button-png.png" alt="" />
</a>

CSS

.thumbnail:hover:after{content:'Hello!';background:#fc0; width:300px; height:100px; position: absolute; z-index:2; top:20px; left:30px;
        
    }
    .thumbnail:hover span, .thumbnail.hover span {
    }
    img {
        position:absolute;
        top: 0px;
        left:0px;
        width:200px;
        height:130px
    }

JavaScript

$('.thumbnail').mouseover(function () {
    $('.thumbnail').removeClass('hover');
    $(this).addClass('hover');
});