Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.
  1. <style type="text/css">
  2. .cool_img {
  3.     displayinline-block;
  4.     positionrelative;
  5.     text-aligncenter;
  6.     overflowhidden;
  7.     border-radius5px;
  8. }
  9.  
  10. .cool_img .info {
  11.     positionabsolute;
  12.     bottom0;
  13. }
  14.  
  15. .cool_img .info span {
  16.     displayblock;
  17.     positionrelative;
  18.     top130px;
  19.     color#FFFFFF;
  20.     background#000000;
  21.     transition-delay0;
  22.     transition-duration0.3s;
  23. }
  24.  
  25. .cool_img .info .info_title {
  26.     font-size18px;
  27.     font-weightbold;
  28.     padding5px;
  29.     border-radius5px 5px 0 0;
  30.     opacity0.8;
  31. }
  32.  
  33. .cool_img .info .info_text {
  34.     font-size12px;
  35.     padding10px;
  36.     opacity0.6;
  37. }
  38.  
  39. .cool_img:hover .info span, .cool_img:focus .info span {
  40.     top0;
  41. }
  42.  
  43. .cool_img:hover .info .info_title {
  44.     transition-delay0.15s;
  45. }
  46.  
  47. .cool_img:hover .info .info_text {
  48.     transition-delay0.25s;
  49. }
  50. </style>
Если описания планируются очень объемные, то смещение элементов span с текстом надо будет сдвинуть вниз на нужное количество пикселов. Для создания эффекта используется CSS-анимация через свойства transition, поэтому для старых браузеров придется замутить что-нибудь попроще или задействовать браузерные префиксы типа "-webkit-", "-moz-" и т.д.

Переходим к HTML-разметке. Верстка включает в себя сами изображения и два информационных блока. Это заголовок и более подробное текстовое описание. Верстка семантически корректная, для большей валидности или, например, если клик на картинке не предполагает какое-либо действие, можно заменить ссылки на блочные элементы div.
  1. <class="cool_img" href="#">
  2.     <img src="images/hover_01.jpg">
  3.     <div class="info">
  4.         <span class="info_title">Снеговик</span>
  5.         <span class="info_text">Стилизованная снежная фигура человека.
  6.         Зимняя забавазародившаяся в древние времена.</span>
  7.     </div>
  8. </a>
  9.  
  10. <class="cool_img" href="#">
  11.     <img src="images/hover_02.jpg">
  12.     <div class="info">
  13.         <span class="info_title">Дед Мороз</span>
  14.         <span class="info_text">Главный сказочный персонаж на празднике
  15.         Нового годаславянский вариант рождественского дарителя</span>
  16.     </div>
  17. </a>
  18.  
  19. <class="cool_img" href="#">
  20.     <img src="images/hover_03.jpg">
  21.     <div class="info">
  22.         <span class="info_title">Елочка</span>
  23.         <span class="info_text">Настоящее или символическое дерево,
  24.         наряжаемое специально к Новому году</span>
  25.     </div>
  26. </a>
Готовый рабочий пример визуального эффекта из этой статьи вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 842 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2020
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.004 сек.) / Память: 4.75 Mb
Наверх