Как сделать всплывающий текст на изображении в html?

Всплывающий текст на изображении при наведении на него мышкой — довольно популярный и красивый визуальный эффект, который часто используют в своей работе многие программисты. Реализовать такую штуку довольно просто, в своем уроке я буду использовать исключительно CSS3. Это легко и просто.

Для работы нам понадобится исполняемый файл  и картинка. Код, который нужно вставить, следующий:

<style>
.text_my {display:none;} 
span:hover {word-spacing: 0} 
span:hover .text_my {
width: 160px;
padding: 10px;
text-align: center;
height: 30px;
background: #121b2c;
opacity: 0.85;
font-size: 14px;
display: block;
position: absolute;
margin-top: -50px;
border-radius: 0 0 10px 10px;
color: white;
}
</style>
<span><img src="ЗДЕСЬ ВСТАВЛЯЕМ АДРЕС КАРТИНКИ" alt="Всплывающий блок" />
<span class="text_my">Hello, World!!!</span > 
</span>

Ну вот собственно и все. Теперь на картинку  накладывается блок с текстом, в котором можно разместить все, что угодно. Очень удобно.