JSFiddle - React, Tailwind, and code Playground

by Ivanq

HTML

<body>
   <div class="photo" data-title="Софийский собор"><img src="http://htmlbook.ru/example/images/thumb2.jpg" alt=""></div>
   <div class="photo" data-title="Польский костел"><img src="http://htmlbook.ru/example/images/thumb1.jpg" alt=""></div>
 </body>

CSS

.photo {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .photo::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; right: 0; bottom: 5px; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
       opacity: 0;
       transition:.5s;
   }
    .photo:hover::after {
        opacity: 1;
    }