Как оформить всплывающую подсказку с помощью CSS?
Приветствую всех читателей проекта Сайт с нуля! Мы продолжаем тему всплывающих подсказок при наведении курсора на картинку или текст. В прошлом материале мы рассмотрели простейшие методы добавления подсказок с помощью одной строки кода. А сегодня мы будем учиться оформлять всплывающую подсказку поинтереснее, например, рассмотрим появление подсказки внизу изображения на затененном фоне.
Такой метод всплывающих подсказок вы неоднократно видели в галереях, в слайдерах, согласитесь, смотрится аккуратно и эффектно. Так как же сделать, чтобы при наведении курсора на картинку, нижняя ее часть затенялась и выводилась на ней подсказка? Такой эффект можно создать с помощью стилей CSS. Что понадобится при этом? Добавить небольшой участок кода в таблицу стилей и одну строку непосредственно между тегами <body>.
Ниже приводится участок кода для CSS с пояснениями к тем строкам, которые ответственны за оформление подсказки, поэтому настроить внешний вид всплывающей подсказки под себя будет совсем несложно. Достаточно изменить исходные значения на свои...
Обратите внимание, что код со стилями размещается между тегами <head>, а код самого изображения - между тегами <body>. Хотя все будет работать, даже если разместить оба кода между тегами <body>, как это сделала я :))
<head>
<style>
.photo {
display: inline-block;
position: relative;
}
.photo:hover::after {
content: attr(data-title);
position: absolute;
left: 0; right: 0; bottom: 0px; /* Положение подсказки */
z-index: 1;
background: rgba(62,62,62,0.7); /* Цвет фона и степень его прозрачности */
color: #fff; /* Цвет текста подсказки */
text-align: center; /* Выравнивание текста по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 28px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div class="photo" data-title="Подари ребенку волшебство!"><img src="images/podari_rebenku_chudo.jpg" alt=""></div>
</body>
Во второй части кода не забудьте указать название СВОЕЙ картинки и СВОЮ подсказку вместо моих! Результат смотрим ниже: