Всплывающее окно при наведении на объект(картинку, текст и т.д.) CSS

Сейчас я вам покажу как сделать на картинке или другом объекте всплывающий текст(подсказку). как показано на картинке. Все очень просто. Для начала HTML код ниже я расскажу что там и как.

<a href="#">

<div class="overlay"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, illo?</p></div>Ссылка
</a>

Создаем сам объект на который мы должны навести мышь, в нашем случае это ссылка. Внутри ссылки создаем div с классом overlay внутри которого должна вылезти подсказка и рядом текст самой ссылки. Я думаю это все понятно. Теперь перейдем к CSS.

.overlay{
  display:none;
  position: absolute;
}
a:hover .overlay{
	display: block;
}

Объясняю что в CSS.  класс Overlay делаем по умолчанию не видимым display:none. Потом чтобы класс не вылезал где попало а появлялся там где нам надо устанавливаем абсолютное позиционирование и заливаем цветом с полупрозрачностью. Параметры с цветом фона и текста и прочего носят лишь декоративный оттенок и являются необязательными.

И последнее создаем параметр для ссылки (тег a) с указанием hover(При наведении мыши) и классу overlay меняем display на блочный элемент

Результат можете посмотреть на ссылке