Визуальный слайд-эффект для подписей изображений на HTML5 и CSS3
Раньше для создания различных эффектов обязательно требовалось подключение javascript и дополнительных файлов изображений, с выходом на арену веб-разработки мощнейших инструментов CSS3 и HTML5 всё реализуется гораздо проще.
В сегодняшнем примере продемонстрирую 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="/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> |
На этом всё! Желающие могут посмотреть полно-масштабное демо и там же поэкспериментировать с кодом, благо онлайн-редактор позволяет это делать:
С уважением, Андрей
Класс!
Столько возможностей открывает сия фича. Отдельное спасибо заhttp://jsfiddle.net/.
Вообще у меня Ваш сайт в «Золотых закладках» еще сос старым дизом сайта!
Спасибо за отзыв.
Я вернулся! *) Итак, продолжаем в свободное время проводить эксперименты с вашими уроками. Есть потребность следующего характера. jsfiddle.net/NeedHate/LmeVW/
Вопрос, как сделать, чтобы после того как раздвинуться картинка и полоска с текстом на зеленом фоне ВНИЗУ появился текст (допустим, сам отзыв). Не могу сообразить как это сделать… 8 (
А я уже было подумал всё))
По вопросу, если без подробностей где то так: Тынц
Если захотите размещать более объёмные отзывы, то увеличивайте сдвиг по вертикали
figure:hover img {
-moz-transform: translateY(-60px);
-o-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
figure:hover img {
-moz-transform: translateY(-60px);
-o-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
Внёс еще некоторые правки, всегда сможете отредактировать или откатить назад.
Удачи!
Есть, текст становится на свое место. Супер. А его можно сделать, более привлекательным? Добавить, например, тени… а то выглядит сухим. Я пробовал
text-shadow:, но текст остается «сухим». Или здесь это невозможно реализовать?Почему же невозможно, всё очень даже возможно, главное использовать там где «нуна», хотите в параграфе
<p>увидеть тень у текста, значит и свойствоtext-shadow:пишите дляfigure p, хоть у вас и наварочено в коде в хлам, но нужный класс можно отыскать ))) И будет примерно так: Тынц Вариантов масса, всё ограничивается лишь вашей фантазией, ну, а тут уж я вам не помощник )))Если будет интересно, можете посмотреть результаты работы. Спасибо за помощь!
И снова здравствуйте…
Столкнулся с неприятной проблемой: что делать, если шаблон в wordpress использует
? но я, само собой разумеется, хочу вынести этот стиль в main-style сайта. И тут он начинает конфликтовать, вот с этим .Как поступить в данном случае? Спасибо.
ой, а я уже и разобрался. 8)
Продолжим, как сделать чтобы figcaption был не текстовым… а картинкой? т.е. одна картинка сменялась другой при наведении.
Очень просто! Вот так: Тынц
Оперативно, по просьбам трудящихся, дополнил статью, как раз по теме вашего вопроса)))
Там получается просто к figcaption по сути нужно было подтянуть тег img… я был так рядом. *)
Спасибо! я с февраля уже столько всему научился благодаря только этому блогу/сайту. Но вызов был брошен и новые идеи с вопросами не за горами *)
PS немного отойду от темы. Кнопки, которые сделаны в разделе «Кнопки CSS3»… есть неприятный нюанс: после нажатия на кнопку (и срабатывании :after) остается border синеватого цвета. Кстати, это заметно и по ниже стоящим кнопками «Предпросмотр» и «Отправить». Почему это происходит?
Спасибо за отзыв.
Что касается рамки округ активных ссылок(нажатых), чтобы убрать рамку достаточно в css добавить пару строк:
a {
outline: none;
}
a {
outline: none;
}
Можно для всех ссылок прописать в самом начале основного или reset.css следующее правило:
:focus {
outline: none;
}
:focus {
outline: none;
}
Здравствуйте! Очень классная фишка! Скажите, а как разместить несколько таких элементов по горизонтали? Очень нужно. Важно чтобы на мобильных устройствах они потом соскакивали и размещались вертикально. Не могли бы вы подсказать как это реализовать?
Используйте
float:left;дляfigure, примерно так: тынц>> Также можно использовать медиа-запросы, для различных пользовательских устройств, я вам показал самый простой пример)))Спасибо огромное! Все получилось. Спасибо, что уделили время!
Здравствуйте еще раз. Не подскажите, можно ли сделать, чтобы текст заменял картинку не при наведении, а при нажатии. Мне это нужно для адаптации сайта под планшеты и телефоны. Заранее спасибо!
Доброго дня. Что-то неверно у меня работает данный эффект. Подскажите, пожалуйста, в чём причина и как поправить?
Ссылка
Всё, помогли на другом форуме.
Спасибо, воспользовался вашими hover эффектами для своего сайта.
Добрый день!
Подскажите пожалуйста, у меня картинка полностью не прячется, что нужно добавить или я что-то не так сделал, но картинка закрывается на процентов 80%, ширина картинки у меня стоит 50%, если я ставлю 30%, то закрывается полностью, как сделать, что бы картинка сразу закрывалась на 100%?
Спасибо!
Здравствуйте.
Значение свойства
transformдолжно соответствовать ширине блока с картинкой. У меня используется фиксированный размерwidth: 350px;Соответственно значения
transform: translateX(-350px);дляfigcaptionи при наведении меняем наtransform: translateX(350px);Должно всё работать))
Здравствуйте!
Скажите, а можно сделать скользящую фото галерею на чистом css3 ?
Вернее миниатюрные фото из 4 шт сдвигаются по одной автоматом и при наведение останавливаются.
Здравствуйте!
Можно, например вот так, с размерами изображений и самого сдайдера, думаю определиться будет несложно
Здравствуйте, у меня такой вопрос, каким образом мне разместить несколько картинок с такой анимацией в СТРОКУ, то есть не как у вас в столбец, пробовал через классы, но безуспешно
Здравствуйте.
Просто определите для
figureвыравнивание по левому краю:float:left;Добрый день!
На Вашем сайте работает со всех браузеров, когда переношу к себе на diviem.at.ua (сайт ucoz), то работает только в Firefox, в чем может быть проблема, код существенно не менял, только размер?
День добрый.
Именно сейчас смотрю на вашем сайте запись «Ванна», в заголовке справа, слайд работает нормально в Chrome, Edge и в IE. см. скрин
Попробуйте в Chrome перезагрузить страницу минуя кеш, с помощью сочетания клавиш Ctrl + F5