Увеличение изображения при наведении курсора css: Как увеличить картинку при наведении? | Рецепты

2D трансформации. Масштабирование | CSS: Transform (трансформация объектов)

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Масштабирование — возможность увеличивать или уменьшать элемент на определённый коэффициент. Это полезный трюк, который очень часто используется в анимациях. Например, вы могли его встречать при наведении курсора на какой-либо элемент. В таком случае масштабирование используется во время события hover. Попробуйте навести курсор мыши на квадрат в следующем примере:

Для масштабирования квадрата использовалась функция scale() свойства transform. В качестве значения может быть указано одно или два числа. На самом деле таких чисел может быть и три, но подробнее об этом мы поговорим в уроке, посвящённом масштабированию в 3D.

• Одно значение: масштабирование происходит на одинаковый коэффициент и по оси x и по оси y. Именно одно значение было использовано в примере выше.
• Два значения: в качестве первого значения передаётся масштабирование по оси x, а в качестве второго аргумента масштабирование по оси y.

Но что именно масштабируется? Если вы попробовали навести курсор в прошлом примере, то заметили, что масштабировался не только сам квадрат, но и текст внутри него. Именно так и будет происходить: функция scale() влияет на всё, что расположено внутри блока и на него самого.

Стандартным значением функции scale() является единица. Вы можете думать о значениях, как об процентах, где единица равна 100%. Так достаточно просто определить диапазон возможных значений: 0 <= x < ∞. Или, другими словами, функция scale()

принимает значение от нуля до бесконечности. Если элемент получит масштабирование со значением ноль, то он просто скроется. Мы можем увеличивать объект до абсолютно любого размера. Но так обычно не делают 🙂

Любое значение меньше единицы уменьшает элемент, а больше единицы увеличивает его. Обратите внимание, что число не обязательно должно быть целым. В качестве значения могут выступать и такие: scale(1.2), scale(0.3), scale(2.1) и так далее. Главное — использовать разделитель в виде точки, иначе вы случайно укажете два разных значения: для оси

x и для оси y.

Пример выше хоть и выглядит достаточно простым, но кроет в себе несколько важных моментов, о которых стоит помнить:

1. Функция scale() не влияет на HTML элементы, расположенные рядом. Попробуйте убрать свойство transform у блока с классом square blue. Вы увидите, что он окажется под зелёным блоком, ровно в том месте, где и был бы без использования свойства transform. То есть элемент ведёт себя так, как будто у него установлено относительное позиционирование.
2. По умолчанию, зелёный элемент оказался выше красного. Здесь происходит контекст наложения элементов друг на друга и он такой же, как и при использовании абсолютного позиционирования: блоки, расположенные ниже в HTML, по умолчанию, будут располагаться выше в контексте наложения, если не указать иного с помощью свойства z-index.

На самом деле, вы можете указать отрицательное значение для любого направления при использовании функции scale. Но что это даст? Представьте, что происходит с элементом, когда его масштабирование по оси x стремится к нулю. Элемент всё больше начинает сплющиваться до тех пор, пока значение не станет нулём. Элемент визуально исчезнет, хотя, на самом деле он продолжит своё существование. Если дать теперь отрицательное значение, то элементу нужно расти, но куда? Правильно — в противоположную сторону. Таким образом мы увидим элемент как если бы находились позади него, или, по-простому, мы отзеркалим элемент по оси

x.

Точка трансформации и масштабирование

При использовании scale вы также можете установить произвольную точку трансформации с помощью transform-origin.

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

• top
• right
• bottom
• left

Что же произойдёт при использовании этих значений? На самом деле всё будет работать так, как и надо — мы просто сменим точку трансформации.

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

Вернёмся к первому примеру урока:

После применения scale(1.5) к центральному блоку он немного сменил своё расположение, так как трансформировался от центральной точки элемента. Именно от неё произошло увеличение. Но что делать, если мы хотим увеличить элемент, но оставить верхнюю левую точку там, где она была бы до применения трансформации? Это может быть очень полезно при создании анимации, так как мы уверены в том, где элемент будет находиться.

Именно здесь пригодится свойство transform-origin. Как было сказано в прошлых уроках, оно может принимать одно или несколько значений:

• Одно значение — установка точки трансформации по оси x.
• Два значения — установка точки трансформации по осям x и y.

Воспользуемся этими значениями и укажем, что центральный блок должен иметь точку трансформации в следующем виде:

• По оси x точка трансформации должна находиться слева
• По оси y точка трансформации должна находиться сверху

Таким образом точкой трансформации станет верхний левый угол, а значит масштабирование будет происходит именно от этой точки, что не даст ей переместиться:

Именно использование свойства transform-origin позволяет добиться эффекта появления элемента слева направо, как часто бывает при наведении на элемент. Попробуйте в следующем примере навести курсор мыши на иконку подписки.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

2 способа масштабирования изображения при наведении в TailwindCSS

• Дом
• Свяжитесь с нами

Войти

Добро пожаловать! Войдите в свою учетную запись

ваше имя пользователя

ваш пароль

Забыли пароль?

Политика конфиденциальности

Восстановление пароля

Восстановите пароль

ваш адрес электронной почты

Поиск

Эффект масштабирования изображения при наведении курсора сейчас довольно популярен.

Вы можете увидеть этот эффект масштабирования практически на каждом веб-сайте. В TailwindCSS вы можете легко добиться эффекта масштабирования при наведении.

Способ 1: масштабирование изображения при наведении курсора в TailwindCSS

Вы можете использовать масштаб и класс перехода TailwindCSS, чтобы добавить эффект масштабирования к отдельному изображению. Это полезно, когда вы показываете изображения в галерее изображений или отдельное изображение в статье. Фрагмент кода ниже масштабирует изображение при наведении курсора, чтобы создать эффект масштабирования. Вы также можете проверить рабочую демонстрацию на игровой площадке попутного ветра.

Увеличение изображения при наведении

XHTML

<дел>