CSS подсказка

by Qwerty_Wasd

HTML

<div class="photo" data-title="Хорошего тебе дня!"><img src="http://my-school18.ucoz.ru/_nw/1/67471376.gif" alt=""></div>

CSS

.photo {
                display: inline-block;              
            }
            .photo:hover::after {
                content: attr(data-title);
                position: absolute; 
                left: 20%; top: 30%;
                z-index: 1; 
                background: rgba(255,255,230,0.9); 
                font-family: Arial, sans-serif; 
                font-size: 11px; 
                padding: 5px 10px; 
                border: 1px solid #333;
            }