Плавное появление надписи при наведении на картинку

21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.

Code (HTML) : Убрать нумерацию

<style type="text/css">
.cool_img {
display: inline-block;
position: relative;
text-align: center;
overflow: hidden;
border-radius: 5px;
}
.cool_img .info {
position: absolute;
bottom: 0;
}
.cool_img .info span {
display: block;
position: relative;
top: 130px;
color: #FFFFFF;
background: #000000;
transition-delay: 0;
transition-duration: 0.3s;
}
.cool_img .info .info_title {
font-size: 18px;
font-weight: bold;
padding: 5px;
border-radius: 5px 5px 0 0;
opacity: 0.8;
}
.cool_img .info .info_text {
font-size: 12px;
padding: 10px;
opacity: 0.6;
}
.cool_img:hover .info span, .cool_img:focus .info span {
top: 0;
}
.cool_img:hover .info .info_title {
transition-delay: 0.15s;
}
.cool_img:hover .info .info_text {
transition-delay: 0.25s;
}
</style>

Если описания планируются очень объемные, то смещение элементов span с текстом надо будет сдвинуть вниз на нужное количество пикселов. Для создания эффекта используется CSS-анимация через свойства transition, поэтому для старых браузеров придется замутить что-нибудь попроще или задействовать браузерные префиксы типа "-webkit-", "-moz-" и т.д.

Переходим к HTML-разметке. Верстка включает в себя сами изображения и два информационных блока. Это заголовок и более подробное текстовое описание. Верстка семантически корректная, для большей валидности или, например, если клик на картинке не предполагает какое-либо действие, можно заменить ссылки на блочные элементы div.

Code (HTML) : Убрать нумерацию

<a class="cool_img" href="#">
<img src="images/hover_01.jpg">
<div class="info">
<span class="info_title">Снеговик</span>
<span class="info_text">Стилизованная снежная фигура человека.
Зимняя забава, зародившаяся в древние времена.</span>
</div>
</a>
<a class="cool_img" href="#">
<img src="images/hover_02.jpg">
<div class="info">
<span class="info_title">Дед Мороз</span>
<span class="info_text">Главный сказочный персонаж на празднике
Нового года, славянский вариант рождественского дарителя</span>
</div>
</a>
<a class="cool_img" href="#">
<img src="images/hover_03.jpg">
<div class="info">
<span class="info_title">Елочка</span>
<span class="info_text">Настоящее или символическое дерево,
наряжаемое специально к Новому году</span>
</div>
</a>

Готовый рабочий пример визуального эффекта из этой статьи вы можете посмотреть на демонстрационной странице.

Просмотров: 4381 | Комментариев: 0

Метки: CSS, HTML, оформление сайта

Внимание! Статья опубликована больше года назад, информация могла устареть!

Добавить комментарий

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 35,665 раз

День добровольца (волонтера)

День начала контрнаступления советских войск под Москвой

День онлайн-предпринимателя

День ниндзя

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0033 сек.) / Память: 4.5 Mb

	2024 - ДЕКАБРЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Плавное появление надписи при наведении на картинку

Комментарии

Добавить комментарий