Перекрывающий слой с аннотациями для изображений
В данном уроке мы сделаем эффект для вывода небольших аннотаций на изображении с использованием CSS (псевдо-класса :checked и комбинаторов). Идея заключается в организации вывода покрывающего слоя с небольшими блоками аннотаций.
Разметка HTML
Структура состоит из заголовка, описания и части предварительного просмотра. Часть предварительного просмотра использует покрывающий слой. Для него добавляем чекбокс, изображение и элементы для аннотаций. содержащих элементы span
. Чекбокс размещается сверху всех элементов и остается доступным для переключения. Он будет первым элементом в структуре, чтобы быть доступным для селекторов соседей:
<div class="ao-item"> <div class="ao-details"> <h2>Заголовок</h2> <p>Описание</p> </div> <div class="ao-preview"> <input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" /> <img src="/images/image01.jpg" alt="image01" /> <div class="ao-annotations"> <span>Поддержка локализации</span> <span>Виджет пользовательского изображения</span> <span>Виджет блога и контактной формы</span> <span>Простые опции темы</span> <span>Виджет нижнего колонтитула с колонками</span> </div> </div> </div>
Может быть любое количество элементов span
. Каждый позиционируется индивидуально.
CSS
В коде урока исключены префиксы браузеров для наглядности. В исходниках код CSS представлен полностью.
Элемент div
с классом ao-item имеет ширину 80%:
.ao-item { width: 80%; margin: 0 auto; padding: 35px 0; position: relative; clear: both; }
Два внутренних элемента div
будут плавающими:
.ao-item:before, .ao-item:after { content:""; display:table; } .ao-item:after { clear:both; } .ao-item { zoom:1; /* Для IE 6/7 */ }
Определим стили для заголовка и описания. Они будут смещаться вправо и иметь ширину 40%. Также слева добавляется отступ. Такое действие не требует никаких дополнительных вычислений, так как используется модель размеров, определяемая свойством box-sizing: border-box, для всех элементов в файле normalize.css. Поэтому элемент будет иметь размер точно 40% по ширине, а отступ будет располагаться "внутри" элемента и не изменит размеров.
.ao-details { float: right; width: 40%; padding-left: 20px; }
Затем добавляем стили для текстовых элементов:
.ao-details h2 { color: #498EA5; margin-top: 0; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); padding-bottom: 10px; box-shadow: 0 1px 0 #DFDEDC, 0 2px 0 rgba(255,255,255,0.5); } .ao-details p { color: #999; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 22px; } .ao-details p a{ font-weight: bold; color: #498EA5; } .ao-details p a:hover{ color: #2A3344; }
Секция предварительного просмотра будет немного больше и смещается влево:
.ao-preview { width: 60%; float: left; position: relative; }
Теперь определим стили для изображений. Для того, чтобы сделать их адаптивными, зададим значение свойства max-width 100%. Таким образом, мы добиваемся заполнения родительского элемента. Изображение будет выполнять трансформацию. Идея заключается в уменьшении масштаба при нажатии на соответствующий чекбокс:
.ao-item img { margin: 0 auto; max-width: 100%; display: block; opacity: 0.8; box-shadow: 1px 1px 10px rgba(0,0,0,0.2); transition: all 0.3s ease-in-out; }
Элемент с аннотацией является перекрывающим слоем, поэтому мы дуем позиционировать его абсолютно. Он будет невидимым за счет установки непрозрачности в значение 0. Также здесь будет использоваться трансформации: нужно делать его непрозрачным и увеличиваться в масштабе при нажатии на чекбокс.
.ao-annotations { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(33,62,68,0.3); box-shadow: 1px 1px 3px rgba(0,0,0,0.05); opacity: 0; z-index: 5; transform: scale(0.8); transition: all 0.3s ease-in-out; }
Элемент span
в аннотации будет иметь абсолютное позиционирование (для каждой метки задаются координаты top
и left
), и для него устанавливается свойство min-width равным 140 px, хотя ширина определяется в процентах. Трансформация будет заключаться в уменьшении масштаба и проявлении (opacity: 1):
.ao-annotations span { display: block; position: absolute; padding: 10px 25px; width: 33%; min-width: 140px; text-align: center; background: rgba(255,255,255,1); color: rgba(20,40,47,0.9); font-size: 16px; font-style: italic; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); box-shadow: 0px 1px 4px rgba(0,0,0,0.2); opacity: 0; transform: scale(1.3); transition: all 0.3s ease-in-out; }
Для каждого элемента span
используется небольшая стрелка, для добавления которой используется псевдо-класс :after
.
.ao-annotations span:after { position: absolute; background: transparent url(../images/arrow.png) no-repeat center center; width: 32px; height: 33px; top: 50%; left: 100%; margin: -16px 0 0 -16px; content: ''; }
Две из меток будут иметь стрелки с левой стороны:
.ao-annotations span:nth-child(3):after, .ao-annotations span:nth-child(4):after { left: auto; right: 100%; margin: -16px -16px 0 0; background-image: url(../images/arrow_left.png); }
Теперь устанавливаем положение для каждого элемента span
. Мы снова используем проценты чтобы позиционирование действовало при изменении размеров:
.ao-annotations span:nth-child(1) { top: 5%; left: 5%; } .ao-annotations span:nth-child(2) { top: 20%; left: -13%; } .ao-annotations span:nth-child(3) { top: 37%; right: 2%; } .ao-annotations span:nth-child(4) { top: 53%; right: -8%; } .ao-annotations span:nth-child(5) { bottom: 18%; left: -4%; }
Теперь займемся нашим чекбоксом. Фокус заключается в размещении его надо всеми остальными элементами и установке высоты и ширины 100%, чтобы он занимал все доступное пространство. Поэтому нажатие на любом участке элемента будет включать эффект. Чекбокс будет скрыт, так его непрозрачность будет установлена в 0. Но он продолжает воспринимать нажатия. Свойство z-index
должно иметь самое высокое значение, чтобы чекбокс размещался поверх остальных элементов:
input.ao-toggle { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; margin: 0; padding: 0; opacity: 0; z-index: 100; border: none; cursor: pointer; }
Теперь определяем, что будет происходить с соседними элементами при нажатии на чекбокс. Изображение будет уменьшаться, измениться тень и прозрачность:
input.ao-toggle:checked + img { box-shadow: 1px 1px 6px rgba(0,0,0,0.2); opacity: 1; transform: scale(0.8); }
Так как мы не можем использовать img:hover (чекбокс перекрывает все), то будем использовать чекбокс для включения эффектов изображения:
input.ao-toggle:hover + img{ opacity: 1; }
Перекрывающий слой с классом ao-annoations и его элементы span
будут увеличиваться в масштабе и становиться непрозрачными:
input.ao-toggle:checked ~ .ao-annotations, input.ao-toggle:checked ~ .ao-annotations span{ opacity: 1; transform: scale(1); }
Для организации изюминки, каждый элемент span
будет выводиться с некоторой задержкой:
input.ao-toggle:checked ~ .ao-annotations span:nth-child(1) { transition-delay: 0.3s; } input.ao-toggle:checked ~ .ao-annotations span:nth-child(2) { transition-delay: 0.4s; } input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) { transition-delay: 0.5s; } input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) { transition-delay: 0.6s; } input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) { transition-delay: 0.7s; }
Также мы добавляем медиа запросы, чтобы исключить смещение основных элементов, уменьшить размер шрифта для аннотаций:
@media screen and (max-width: 730px){ .ao-item .ao-details, .ao-preview { float: none; width: 100%; padding: 0; text-align: left; } .ao-annotations span { font-size: 11px; } }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/LDIKaap9oOQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.