JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<img alt="картинка" src="http://lorempixel.com/150/100"/>

CSS

img {vertical-align:text-bottom;}
.image-wrapper {position:relative;}
.image-wrapper:after {
    content:attr(alt);
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    background:rgba(255,255,255,0.7);
    text-align:center;
}

JavaScript

$("img").each(function(){
    var span=$("<span class='image-wrapper'/>");
    span.attr('alt',$(this).attr('alt'));
    $(this).wrap(span);
});