JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="b-pict">
    <div class="b-pict__inner">
        <img src="http://placehold.it/200x200" alt="">
        <div class="b-pict__caption">Название фотографии</div>
    </div>
</div>

CSS

.b-pict{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-family: 'segoe ui', sans-serif;
    font-weight: 700;
}
.b-pict__inner{   
    overflow: hidden;
    position: relative;
}
.b-pict__caption{
    position: absolute; top: 15px; right: -50%;
    color: #000;
    z-index: 1;
}
.b-pict:after{
    content: 'Название фотографии';
    color: #f00;
    position: absolute; top: 15px; right: -50%;  
}