JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div id="content">
  <img src="http://placekitten.com/200/300" />
</div>

CSS

.img-caption {
  font-style: normal !important;
  color: #fff;
  position: absolute;
  top: 200px;
  left: 5px;
  width: 80%;
  pointer-events: none;
}

JavaScript

$("#content img").hover(function() {
    var imageCaption = $(this).attr("alt");
    if (imageCaption != '') {
        var imgWidth = $(this).width();
        var imgHeight = $(this).height();
        var position = $(this).position();
        var positionTop = (position.top + imgHeight - 26)
        $("<span class='img-caption'><em>" + imageCaption +
            "</em></span>").css({
        }).insertAfter(this);
    }},function(){$(this).siblings('.img-caption').remove();}
);