Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » HTML & CSS » Визуальный слайд-эффект для подписей изображений на HTML5 и CSS3

Визуальный слайд-эффект для подписей изображений на HTML5 и CSS3

Раньше для создания различных эффектов обязательно требовалось подключение javascript и дополнительных файлов изображений, с выходом на арену веб-разработки мощнейших инструментов и всё реализуется гораздо проще.
В сегодняшнем примере продемонстрирую html-разметку и готовый набор правил css, для создания одного из множества визуальных эффектов вывода подписей к изображениям, эффекта в виде выскальзывающего блока с определенным содержанием. В заголовке назвал его условно «слайд-эффектом», потому-как «выскальзывающие», или ещё хлеще «выдвигающиеся», «выезжающие» , подходят больше для логопедических тренировок. Неважно, назовите «шторками», кстати очень распространенное название эффектов при наведении на картинки.

И так, смотрим пример, а потом немного пояснений и разбор что к чему и куда...

Поддержка браузерами

Эффект основан на трансформациях и переходах CSS3 применённых относительно к тегу HTM5 <figure>. Стопроцентное функционирование в следующих браузерах: Internet Explorer 10+, Firefox 6+, Chrome 13+, Opera 11+ и Safari 3.2+.
Исходя из этого, следует простой вывод: широко и повсеместно использовать эффекты основанные только на CSS3, пока преждевременно, конечно если вам не всё равно на армию пользователей упорно засевших на XP с её IE8. Хотя...

HTML Разметка

Как я писал выше, для группирования изображения и подписи к нему используем теги <figure> и <figcaption> из арсенала платформы HTML5

<figure>
 <img src="http://dbmast.ru/wp-content/uploads/2014/01/dbmast2.jpg">
 <figcaption>
  <h2>Заголовок</h2>
     <p>
      Пример создания визуального эффкта выскальзывающей подписи к изображениям с применением только CSS3.
     </p>   
     <p>
      Здесь можете разместить например, краткое описание товара, анонс статьи или представление работ портфолио.
     </p>
     <p>
      Всё что угодно, в зависимости от размера миниатюры и вашей неуёмной фантазии.
     </p>
  <a href="#">Ссылка »</a>
 </figcaption>
</figure>

Изображение помещаем в раздел тега <figure>, сразу после картинки открываем тег <figcaption>, размещаем нужное вам содержание(заголовок, описание, ссылку) и закрываем теги </figcaption> и </figure>
Всё! Остаётся самое интересное, это сформировать внешний вид и поведение всех элементов используя магию свойств CSS3.

Стили CSS

Начнем с определения стилей для тега <figure>, укажем всё необходимое, ширину width:, высоту height:, отступы margin:, стиль курсора, размер и начертание шрифта, позиционирование position:, a так же укажем свойство overflow: hidden, для того чтобы скрыть все элементы, вложенные в блок и выступающие за его границы.

figure {
  width: 350px;
  height: 240px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: left;
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  cursor: default;
  font: normal 11px/15px Helvetica, Arial, sans-serif;
}

В примере добавил рамку и немного тени box-shadow:, придав тем самым чуточку выразительности основному элементу с картинкой.
Долее сформируем блок подписи к изображению в теге <figcaption> и определим ему свойства transition: и transform:, а так же спрячем его до поры до времени с помощью свойства visibility:hidden;.

figure figcaption {
  width: 350px;
  height: 240px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: #eee;
  -moz-transform: translateX(-350px);
  -o-transform: translateX(-350px);
  -webkit-transform: translateX(-350px);
  transform: translateX(-350px);
  visibility: hidden;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

Дальше нам необходимо определить позиционирование position: и эффект перехода transition: для картинки, и параграфа p с содержанием, а так же назначить стили для заголовка h2, и ссылки присутствующей в теле подписи.

figure img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
 
figure h2 {
  text-transform: uppercase;
  color: #333;
  position: relative;
  font-size: 17px;
  letter-spacing: 1px;
  margin: 20px 0 0 20px;
}
 
figure p {
  font-size: 12px;
  line-height: 17px;
  position: relative;
  color: #333;
  margin: 10px 0 10px 20px;
  width: 310px;
  -webkit-transition: all 0.4 ease-out;
  -moz-transition: all 0.4 ease-out;
  -ms-transition: all 0.4 ease-out;
  -o-transition: all 0.4 ease-out;
  transition: all 0.4 ease-out;
}
 
figure a {
  text-decoration: none;
  color: #359CC6;
  margin: 10px 0 10px 20px;
}
 
figure a:hover {
  color: #E88F00;
  border-bottom: 1px dotted #9F1D35;
}

Теперь осталось только завести наш эффект с помощью псевдокласса :hover для элементов расположенных в теге figure:

figure:hover figcaption {
-moz-transform:    translateX(0);
-o-transform:      translateX(0);
-webkit-transform: translateX(0);
transform:         translateX(0);
visibility:visible;
}
 
figure:hover img {
-moz-transform:    translateX(350px);
-o-transform:      translateX(350px);
-webkit-transform: translateX(350px);
transform:         translateX(350px);
}
 
figure:hover p{
opacity: 1;
}

Дополнение

В одном из комментариев к уже опубликованной статье меня спросили: «как сделать чтобы figcaption был не текстовым... а картинкой?» То есть, сделать так чтобы одна картинка сменялась другой при наведении.

Всё очень просто, необходимо в CSS добавить селектор с именем img к разделам figure figcaption и figure:hover figcaption, так чтобы получилось
figure figcaption img и figure:hover figcaption img соответственно. Чтобы не дублировать одинаковые свойства, следует объединить их в одну группу, прописав названия селекторов через запятую:

figure figcaption,
figure figcaption img{
....здесь все необходимые свойства
}
 
figure:hover figcaption,
figure:hover figcaption img{
...здесь все необходимые свойства
}

В общем, чтобы вам особо не заморачиваться, дополнил код CSS, добавив возможность смены картинки на другую при наведении по умолчанию. Если вам понадобится использовать такую возможность достаточно в figcaption вместо текстового содержания поместить нужную вам картинку:

<figure>
 <img src="адрес-вашей-картинки-1.jpg">
 <figcaption>
  <img src="адрес-вашей-картинки-2.jpg">
 </figcaption>
</figure>

На этом всё! Желающие могут посмотреть полно-масштабное демо и там же поэкспериментировать с кодом, благо онлайн-редактор позволяет это делать:

С уважением, Андрей

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

30 комментариев
  1. semen74:

    Класс!

    Столько возможностей открывает сия фича. Отдельное спасибо заhttp://jsfiddle.net/.

    Вообще у меня Ваш сайт в «Золотых закладках» еще сос старым дизом сайта!

    Ответить
  2. NeedHate:

    Я вернулся! *) Итак, продолжаем в свободное время проводить эксперименты с вашими уроками. Есть потребность следующего характера. jsfiddle.net/NeedHate/LmeVW/

    Вопрос, как сделать, чтобы после того как раздвинуться картинка и полоска с текстом на зеленом фоне ВНИЗУ появился текст (допустим, сам отзыв). Не могу сообразить как это сделать... 8 (

    Ответить
    • driver:

      А я уже было подумал всё))

      По вопросу, если без подробностей где то так: Тынц

      Если захотите размещать более объёмные отзывы, то увеличивайте сдвиг по вертикали

      figure:hover img {
      -moz-transform:    translateY(-60px);
      -o-transform:      translateY(-60px);
      -webkit-transform: translateY(-60px);
      transform:         translateY(-60px);
      }

      Внёс еще некоторые правки, всегда сможете отредактировать или откатить назад.

      Удачи!

      Ответить
  3. NeedHate:

    Есть, текст становится на свое место. Супер. А его можно сделать, более привлекательным? Добавить, например, тени... а то выглядит сухим. Я пробовал text-shadow:, но текст остается «сухим». Или здесь это невозможно реализовать?

    Ответить
    • driver:

      Почему же невозможно, всё очень даже возможно, главное использовать там где «нуна», хотите в параграфе <p> увидеть тень у текста, значит и свойство text-shadow: пишите для figure p, хоть у вас и наварочено в коде в хлам, но нужный класс можно отыскать ))) И будет примерно так: Тынц Вариантов масса, всё ограничивается лишь вашей фантазией, ну, а тут уж я вам не помощник )))

      Ответить
  4. NeedHate:

    Если будет интересно, можете посмотреть результаты работы. Спасибо за помощь!

    Ответить
  5. NeedHate:

    И снова здравствуйте...

    Столкнулся с неприятной проблемой: что делать, если шаблон в wordpress использует ? но я, само собой разумеется, хочу вынести этот стиль в main-style сайта. И тут он начинает конфликтовать, вот с этим .

    Как поступить в данном случае? Спасибо.

    Ответить
  6. NeedHate:

    ой, а я уже и разобрался. 8)

    Ответить
  7. NeedHate:

    Продолжим, как сделать чтобы figcaption был не текстовым... а картинкой? т.е. одна картинка сменялась другой при наведении.

    Ответить
  8. NeedHate:

    Там получается просто к figcaption по сути нужно было подтянуть тег img... я был так рядом. *)

    Спасибо! я с февраля уже столько всему научился благодаря только этому блогу/сайту. Но вызов был брошен и новые идеи с вопросами не за горами *)

    PS немного отойду от темы. Кнопки, которые сделаны в разделе «Кнопки CSS3»... есть неприятный нюанс: после нажатия на кнопку (и срабатывании :after) остается border синеватого цвета. Кстати, это заметно и по ниже стоящим кнопками «Предпросмотр» и «Отправить». Почему это происходит?

    Ответить
    • driver:

      Спасибо за отзыв.

      Что касается рамки округ активных ссылок(нажатых), чтобы убрать рамку достаточно в css добавить пару строк:

      a {
      outline: none;
      }

      Можно для всех ссылок прописать в самом начале основного или reset.css следующее правило:

      :focus {
      outline: none;
      }
      Ответить
  9. Игорь:

    Здравствуйте! Очень классная фишка! Скажите, а как разместить несколько таких элементов по горизонтали? Очень нужно. Важно чтобы на мобильных устройствах они потом соскакивали и размещались вертикально. Не могли бы вы подсказать как это реализовать?

    Ответить
    • driver:

      Используйте float:left; для figure, примерно так: тынц>> Также можно использовать медиа-запросы, для различных пользовательских устройств, я вам показал самый простой пример)))

      Ответить
  10. Игорь:

    Здравствуйте еще раз. Не подскажите, можно ли сделать, чтобы текст заменял картинку не при наведении, а при нажатии. Мне это нужно для адаптации сайта под планшеты и телефоны. Заранее спасибо!

    Ответить
  11. Виталий:

    Доброго дня. Что-то неверно у меня работает данный эффект. Подскажите, пожалуйста, в чём причина и как поправить?

    Ссылка

    Ответить
  12. Спасибо, воспользовался вашими hover эффектами для своего сайта.

    Ответить
12»
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться без комментирования

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru