Всплывающее окно при наведении на объект(картинку, текст и т.д.) 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 на блочный элемент
Результат можете посмотреть на ссылке