Выскальзывающее название изображения
Эффект названий изображений, которые выскальзывают при наведении курсора мыши на картинку, можно создать с помощью набора взаимосвязанных элементов div. Но в данном уроке мы будем использовать структуру HTML5 для изображения с названием и CSS3 для задания стилей.
Зачем? Такое решение может помочь сохранить пространство в шаблоне. Сами по себе названия могут иметь отвлекающий от основной линии дизайн, поэтому их лучше выводить только тогда, когда они нужны. В любом случае, решение, предложенное в данном уроке, является простой демонстрацией возможностей. Будете ли вы его использовать, зависит от вас.
Структура HTML5
В ней нет ничего более, чем простая разметка для изображения с названием.
<figure> <img src="/yay.jpg" alt=""> <figcaption> yay!!! </figcaption> </figure>
Структура CSS
Элемент figure
содержит все остальное и является основным строительным блоком. Сущность нашей концепции начинает проявляться здесь. Элемент figure
нуждается в свойстве position: relative;
, что дает нам возможность абсолютно позиционировать название точно в том месте, где нам нужно. Также требуется свойство overflow: hidden;
, чтобы выскальзывающее название скрывалось при выходе за границы нашего элемента figure
.
figure { display: block; position: relative; overflow: hidden; } figcaption { position: absolute; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; }
Включаем выскальзывание
Нам нужно скрывать название, чтобы мы могли выводить его при наведении курсора мыши на изображение. Будем позиционировать название немного позади нижнего левого угла и скроем его с помощью установки прозрачности. Когда курсор мыши окажется над изображением, название будет выскальзывать на свое место и становиться видимым. Для выскальзывания будем использовать transition
.
figcaption { position: absolute; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; opacity: 0; bottom: 0; left: -30%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } figure:hover figcaption { opacity: 1; left: 0; }
Опции
На демонстрационной странице положение и направление выскальзывания названия различные для каждого изображения. Такое поведение реализовано с помощью добавления имени класса к изображению и позиционирования различными способами, в зависимости от класса.
.cap-left figcaption { bottom: 0; left: -30%; } .cap-left:hover figcaption { left: 0; } .cap-right figcaption { bottom: 0; right: -30%; } .cap-right:hover figcaption { right: 0; } .cap-top figcaption { left: 0; top: -30%; } .cap-top:hover figcaption { top: 0; } .cap-bot figcaption { left: 0; bottom: -30%;} .cap-bot:hover figcaption { bottom: 0; }
А как посетитель узнает, что там что-то есть?
Для того, чтобы посетитель мог иметь возможность видеть ваши великолепные и остроумные подписи под изображениями, надо поставить индикатор их присутствия. Мы будем использовать знак вопроса. Чтобы избежать избыточной разметки будем генерировать содержание в форме псевдо элемента для изображения.
figure:before { content: "?"; position: absolute; background: rgba(255,255,255,0.75); color: black; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; /* Только Fx 4 поддерживает трансформации для псевдо элементов... */ -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; opacity: 0.75; } figure:hover:before { opacity: 0; }
Обратите внимание, что никаких свойств CSS позиционирования псевдо элемента, кроме position: absolute;
, нет. Позиционирование зависит от установленного класса опции. Возможно вы захотите размещать знак вопроса названии. Можно сделать так:
.cap-left:before { bottom: 10px; left: 10px; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/IMgExjBf9-o/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.