Как создать чистый CSS onClick Image Zoom Effect

У CSS нет псевдокласса для нацеливание на события клика, и это составляет один из самые большие болевые точки фронтенд-разработчиков. Ближайший псевдокласс : активный какой стиль элемента в течение периода времени пользователь нажимает на него мышью.

Этот эффект, однако, недолгим: как только пользователь отпускает мышь, : активный больше не работает Нам нужно найти какой-то другой способ эмулировать событие клика в CSS.

Этот пост был написан в ответ на запрос читателя, и он собирается объяснить, как целевое событие клика с чистым CSS в конкретном случае использования, увеличение изображения.

Вы можете увидеть окончательный результат ниже - CSS-решение для увеличение изображения при нажатии.

Когда использовать решение только для CSS

Прежде чем продолжить, я хочу сказать, что для увеличения изображения я рекомендую метод «только CSS» (который изменяет размеры изображения), только когда вы хотите не замужем или группа из нескольких изображений иметь функцию масштабирования.

Для правильный Галерея, JavaScript обеспечивает большую гибкость и эффективность.

Фронтальные методы, которые мы будем использовать

Теперь, когда вы получили предупреждение, давайте быстро рассмотрим 3 ключевых метода мы будем использовать:

1. HTML-тег что позволяет браузерам создавать связанные области над изображением. Читайте больше на элемент в моем предыдущем посте.
2. usemap атрибут тег, который подключает изображение к карте изображения.
3. : цель CSS псевдокласс который представляет элемент, который был нацелен, используя его селектор идентификатора.

1. Создайте базу HTML

Во-первых, давайте создадим базу HTML. В коде ниже мы добавляем изображение для увеличения и увеличения & значки кнопок закрытия для увеличения и уменьшения.

Важно иметь ID на изображении, которое нужно увеличить, а кнопка Закрыть должна быть ссылкой, которая имеет HREF = "#" атрибут, я объясню почему позже в посте.

2. Добавьте CSS

Изначально значок Закрыть не должен отображаться. позиция, поле-, оставил, а также низ свойства место Развернуть и Закрыть значки где мы хотим, чтобы они были - в правом верхнем углу изображения.

события указателя: нет; Правило позволяет событиям мыши пройти через значок Развернуть а также достичь изображения.

 .img height: 150px; ширина: 200 пикселей;  .close background-image: url ("Close-icon.png"); повторение фона: без повтора; внизу: 418 пикселей; дисплей: нет; высота: 32 пикс; слева: 462 пикселя; margin-top: -32px; положение: относительное; ширина: 32 пикселя;  .expand bottom: 125px; поле слева: -32px; поле справа: 16 пикселей; события указателя: нет; положение: относительное;  

3. Добавьте карту изображения

На карте изображения кликабельная область должно быть в правом верхнем углу изображения прямо под значком «Развернуть» и о его размере. Поместите элемент перед первым тег в HTML. Мы свяжем изображение с картой на следующем шаге..

В приведенном выше блоке кода тег определяет форма, размер и URI связываемой области внутри карты изображений. Для прямоугольная форма, форма атрибут принимает прямоугольник значение, а четыре значения из Coords Атрибут представляет расстояние в пикселях между:

1. левый край изображения и левый край области ссылки
2. верхний край изображения и верхний край области ссылки
3. левый край изображения и правый край области ссылки
4. верхний край изображения и нижний край области ссылки

Значение HREF атрибут должен быть хэш-идентификатор изображения (вот почему изображение должно иметь Я бы).

4. Привязать изображение к карте изображения

Добавить usemap приписать изображение так, чтобы привязать его к карте изображения. Его значение должно быть хэш-представление название атрибут тег мы добавили в шаге 3.

Кликабельная область карты изображения теперь лежит за кнопкой Развернуть. Когда пользователь нажимает кнопку «Развернуть», в действительности щелкается область, по которой можно щелкнуть. Помните, что мы создали кнопку «Развернуть». “проходимый” с события указателя: нет; правило на шаге 2.

Таким образом, пользователь нацеливается на само изображение щелкнув по нему, и после щелчка к URI добавляется суффикс "# Img1" идентификатор фрагмента.

5. Стиль : цель Псевдо-класс

До "# Img1" идентификатор фрагмента находится в конце URI, целевое изображение может быть в стиле с : цель Псевдо-класс

Размеры целевого изображения увеличиваются, отображается кнопка «Закрыть», а кнопка «Развернуть» скрывается..

 .img: target height: 450px; ширина: 500 пикселей;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Как работает кнопка закрытия

Поскольку кнопка «Закрыть» была добавлена ​​в качестве фонового изображения (шаг 2), и на самом деле пометить с HREF = # Атрибут (Шаг 1), когда он щелкает, он удаляет идентификатор фрагмента с конца URI. Поэтому это также удаляет : цель Псевдо-класс из изображения и изображения возвращается к своему предыдущему размеру.

Справочная информация: почему и не ?

К настоящему времени вы наверняка понимаете, что самое важное для этого решения только для CSS это нацелить изображение с помощью HREF = "# imgid" атрибут, что также можно сделать с помощью тег вместо карты изображения.

дефолт значение для форма Атрибут создает прямоугольная связываемая область, которая покрывает все изображение. Если бы вы были использовать вместо этого вам придется кодировать его, чтобы покрыть изображение, и вам также может понадобиться использовать элемент-обертку для той же цели.

Для поддержки браузеров IE до этого вы можете использовать вместо , или увеличьте изображение, щелкнув в любом месте на нем (в этом случае вам не понадобится значок «Развернуть»)..