JSFiddle - React, Tailwind, and code Playground

by Nilambar Sharma

HTML

<div class="img-wrapper"><img src="http://lorempixel.com/250/250/nature/1" alt="image">
    <div class="caption">Lorem ipsum dolor sit amet.</div>
    </div>

CSS

.img-wrapper{
    width:250px;
}
.caption{
    display:none;
    position:absolute;
    top:2%;
    color:#FF0000;
}

JavaScript

$('.img-wrapper img').hover(function(){
 //$(this).css('border','1px red solid');
    $('.caption').stop().animate({"opacity": .5});
}, function(){
  // $(this).css('border','none');
    $('.caption').stop().animate({"opacity": 0});
})