Увеличение изображения при наведении: Плавное увеличение изображения при наведении на чистом CSS3

Установлен lightslider на карточке товара. Будет модуль увеличивать картинки?

Ответ:

Дополнение работает на страницах списков товаров и в модулях. На карточку товара не влияет.

Написать отзыв или задать вопрос

«Retina» эффект лупы — увеличение изображения при наведении!

Apple, уже давно применяет выигрышные стратегии в области маркетинга – создает хорошо продуманные продукты, которые вызывают целую шумиху перед очередным выпуском продукта.

Это же относится и к последней версии iPhone. Они придумали – “Retina Display” (эффект лупы) и сопровождающие его промо-изображения.

И сегодня мы будет превращать статическое изображение в полностью функциональный “Retina” эффект лупы, только с использованием JQuery и CSS. Это будет красивый и даже полезный эффект увеличения изображения при наведении, что может быть использовано и практично для любого изображения.

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

HTML

Разметка кода для эффекта лупы достаточно проста. Как видите, у нас есть только ряд элементов div и изображение.

Элемент #iphone отображает телефон iphone, само окно, внутри которого #webpage скриншот веб-страницы. Скриншот-картинка отображается в половину своего первоначального размера.

Наконец, мы видим DIV – #retina, который и является “лупой”, округляется с помощью CSS3 и отображает увеличенную версию веб-страницы при перемещении курсора мыши по картинке, области #webpage.

CSS стили

Переходим к части CSS стилей. Мы собираемся стилизовать элементы #iphone, #webpage и #retina, поэтому будем воплощать удивительные эффекты увеличения изображения в жизнь.

Указав абсолютное позиционирование для #webpage, мы можем применить вертикальное и горизонтальное центрирование, тем самым эффективно расположить скриншот веб-страницы по центру окна iphone телефона.

Для #retina также присваивается абсолютное позиционирование, так что его возможно позиционировать в JQuery, просто указав верхнее и левое смещения offset. Это DIV #retina также имеет скриншот веб-страницы в качестве фона (в оригинальном размере). Именно это создает иллюзию увеличения изображения, эффекта лупы.

Для “лупы” #retina мы также применили border-radius со значением ровно половину его ширины, которая превращает его в идеальный круг (по крайней мере в браузерах, которые поддерживают свойство скругления углов CSS3 – Chrome, Safari, Opera, Firefox…).

И, наконец, мы прячем курсор мыши, добавляя пустой файл курсора (Google Chrome не может показывать совершенно пустой курсор, поэтому специально для него мы добавляем белый курсор в 1px – по крайней мере это лучше, чем ничего).

Браузер Opera полностью игнорирует пользовательские курсоры и нет никаких обходных путей, поэтому пользователи этого браузера не не увидят все красоту этого эффект.

JQuery скрипт

Итак, все стили css у нас есть, остался лишь вопрос некоторого JavaScript кодирования с помощью JQuery библиотеки.

В функции mouseMove, текущие координаты мыши передаются как e.pageX и e.pageY, но они являются абсолютными по отношению к документу. Высчитав позиции #webpage, мы в итоге имеем относительные координаты для курсора мыши, которые затем используются для позиционирования “лупы” #retina.

Этот JavaScript код, в сочетании CSS стилями, создает эффект лупы, увеличения изображения при наведении, в чистом виде.

Заключение

Все готово! Я надеюсь Вы найдете применение для этого эффекта лупы, который будет прекрасным и полезным дополнением к изображениям. Надеюсь, Вам понравилось!

Webflow Bit # 1: эффект масштабирования при наведении

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

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

Шаг 1: Выберите элемент и добавьте внешнее свечение.

Выберите свое изображение (или любой другой элемент, которому вы хотите дать это взаимодействие), затем прокрутите вниз до раздела «Тени» на вкладке «Стиль». В моем примере я установил внешнее свечение черным с непрозрачностью 50% и размытием 10 пикселей, чтобы придать элементу некоторую глубину.

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

Шаг 2. Уменьшите масштаб элемента.

Затем прокрутите вниз до раздела «Преобразования» на вкладке «Стиль». Щелкните знак плюса, чтобы добавить новое преобразование, переключитесь на вкладку масштабирования, затем установите оси X и Y на 0,95.

Выполнение этого в состоянии изображения по умолчанию позволит нам вернуться к 1 при наведении курсора, создавая эффект масштабирования.

(Необязательно) бонусный эффект: Установите фильтр оттенков серого.

Прокрутите вниз до раздела «Эффекты» на вкладке «Стиль». В разделе фильтров нажмите кнопку с плюсом, чтобы добавить новый фильтр, затем выберите «оттенки серого». Это сделает изображение по умолчанию черно-белым, и мы вернем цвет при наведении курсора.

Шаг 3. Добавьте переходы для каждого свойства.

Теперь прокрутите вкладку «Стили» вверх, пока не дойдете до раздела «Переходы и преобразования».Добавьте таймер перехода для каждого свойства, которое вы только что добавили:

• Transform (для уменьшения масштаба)
• Filter (для фильтра оттенков серого)
• Box shadow (для внешнего свечения)

Это установит время, чтобы каждый переход чувствует себя гладко и не мешает.

Шаг 4. Установите стили наведения.

В правом верхнем углу вкладки «Стили» находится раскрывающееся меню «Состояния». Откройте это раскрывающееся меню и нажмите наведение.

Затем скройте свои стили шкалы и оттенки серого, щелкнув значок глаза рядом с каждым стилем.

И, наконец, установите размытие внешнего свечения на 50 пикселей, чтобы придать элементу большую глубину. Вот и все!

Шаг 5. Просмотрите свою работу и наслаждайтесь.

Нажмите кнопку предварительного просмотра в верхнем левом углу конструктора и наведите указатель мыши на изображение, чтобы увидеть свою работу.

Автоматическое масштабирование фотографий при наведении курсора мыши в Google Chrome

Google Chrome имеет функцию масштабирования, которая увеличивает веб-страницу, включая текст, изображения, видео и т. Д. Однако каждую веб-страницу необходимо увеличивать или уменьшать вручную. Масштабирование при наведении автоматически масштабирует фотографии при наведении курсора мыши в Chrome.

Ярлык для увеличения масштаба — Ctrl — +, а для уменьшения вы можете нажать Ctrl — -. Чтобы увеличить или уменьшить масштаб с помощью мыши, вы можете удерживать клавишу Ctrl и перемещать кнопку прокрутки мыши вверх или вниз для увеличения или уменьшения масштаба.

В большинстве случаев нам нужны маленькие изображения, которые нужно увеличить, чтобы лучше рассмотреть изображения.

Hover Zoom — автоматическое масштабирование фотографий при наведении.

Обновление: Теперь вы можете использовать Hover Zoom + для той же цели.

Hover Zoom — замечательное расширение Google Chrome, которое помогает нам.

Масштабирование при наведении курсора обеспечивает увеличенные версии эскизов или уменьшенные изображения при наведении курсора мыши на изображение.

Это будет сделано автоматически без задержек.Просто наведите указатель мыши на изображение, и оно откроет увеличенную версию изображения в окне наведения, не щелкая и не открывая что-либо еще.

Когда вы переместите указатель мыши от изображения, увеличенное изображение автоматически исчезнет.

Иногда может раздражать то, что расширение открывает изображения мгновенно, даже если мы случайно наведем указатель мыши.

К счастью, мы можем настроить задержку, после которой изображение увеличивается.

Чтобы настроить задержку, перейдите в Настройки Chrome -> Расширения .В разделе «Масштаб при наведении» выберите «Параметры». В разделе «Задержка» отрегулируйте задержку по секундам в соответствии с вашими потребностями.

Вы также можете включить или отключить расширение Hover Zoom для определенных сайтов.

Самая большая проблема с Hover Zoom заключается в том, что он работает не для всех сайтов, но будет работать для большинства сайтов, включая Facebook, Twitter, Google, Reddit, Amazon, Tumbler и, конечно же, ITechtics.

В целом, если вы открываете веб-сайты с большим количеством маленьких изображений, расширение Hover Zoom просто необходимо.Если вам неудобно использовать Hover Zoom, вы также можете попробовать аналогичные расширения Google Chrome, такие как Photo Zoom для Facebook, Photo Zoom для Twitter, Image Hover Zoom и Hover Free.

Какое расширение Google Chrome лучше всего подходит для вас? Для меня основным расширением масштабирования изображений по-прежнему остается Hover Zoom.

Как увеличить / увеличить элементы при наведении с помощью CSS — Techstacker

Узнайте, как увеличить / увеличить элементы при наведении с помощью чистого CSS, используя метод преобразования свойства transform : scale () .

Увеличение / увеличение при наведении

Попробуйте навести указатель мыши на это поле:

Он масштабируется ровно в 1,5 раза по сравнению с исходным размером — поэтому он становится больше на 50%, когда вы наводите на него указатель мыши (наводите курсор).

Метод масштабирования свойства CSS transform может увеличивать или уменьшать размер элементов. Он работает как в 3D, так и в 2D. В этом простом примере мы используем 2D.

Чтобы воссоздать приведенный выше пример, нам понадобится 1 элемент HTML и 2 набора правил CSS.

HTML

Сначала создайте элемент HTML с помощью класса zoom-box :

CSS

Затем добавьте этот CSS в свою таблицу стилей:

  . zoom-box {
  цвет фона: # CF4B32;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  маржа: 32 пикселя автоматически;
  переход: преобразовать .2s;
}

.zoom-box: hover {
  преобразовать: масштаб (1,5);
}  

Вот и все!

Как работает код

• Сначала мы создаем HTML-элемент div с атрибутом класса zoom-box .
• Затем мы создаем два набора правил для класса поля масштабирования, один для статического состояния по умолчанию, .zoom-box , и один для состояния динамического наведения, .zoom-box: hover .
• Первый набор правил получает некоторые косметические свойства / размер (высота , ширина, цвет ). Свойство margin предназначено только для выравнивания поля по центру (необязательно).
• Важной частью класса .zoom-box является свойство transition со значением transform и длительностью .2с (200 миллисекунд).
• Во втором наборе правил .zoom-box: hover мы добавляем свойство transform с методом scale () в качестве значения. Требуется параметр 1,5 , который определяет, насколько элемент коробки должен увеличиваться при наведении курсора. 1,5 — это как если бы сказать 150% от первоначального размера.

Совместимость с браузером

Вот код из этого руководства с добавленными префиксами поставщиков браузера, поэтому он работает во всех основных браузерах, Chrome, Firefox, Safari, Opera:

 .zoom-box {
цвет фона: # cf4b32;
ширина: 100 пикселей;
высота: 100 пикселей;
маржа: 32 пикселя автоматически;
-webkit-transition: -webkit-transform 0.2s;
переход: -webkit-transform 0.2s;
переход: преобразование 0,2 с;
переход: преобразование 0,2 с, -webkit-преобразование 0,2 с;
}

.zoom-box: hover {
-webkit-transform: scale (1.5);
преобразовать: масштаб (1,5);
}  

Полезная информация

Обратите внимание, что прямоугольный элемент масштабируется вверх и вниз с одинаковой продолжительностью / синхронизацией перехода, хотя мы только добавили свойство transition к . зум-бокс класс.

Это происходит потому, что когда свойство перехода добавляется к исходному селектору класса ( .zoom-box ), его значения автоматически добавляются к каждому дополнительному селектору, присоединенному к классу, в данном случае это : hover ( также называется псевдоклассом )

Если вы добавляете только свойство transition к классу селектора : hover (псевдо), то оно анимирует только часть увеличения масштаба, но не уменьшает масштаб.Как только вы выходите за пределы прямоугольного элемента, он резко уменьшается до нуля (0 секунд), чего вы редко хотите, так как это неприятно для глаз.

Если вы хотите использовать разные типы и продолжительность анимации для разных состояний вашего элемента (вверх / вниз), вы просто добавляете свойство transition к селектору псевдокласса : hover и присваиваете ему разные значения.

Как добавить эффекты наведения Кена Бернса к изображениям, модулям и строкам в Divi

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

Эффект Кена Бернса также можно использовать в качестве эффекта наведения курсора на изображения. Наверняка вы видели это раньше. Стремясь оживить изображения, веб-дизайнеры добавляют к изображениям эффекты наведения, которые заставляют их увеличивать, перемещать и вращать.

С выпуском эффектов преобразования для Divi Builder стало еще проще добавлять эффекты наведения курсора на изображения. Эти параметры преобразования позволяют масштабировать (масштабировать), перемещать (или панорамировать) и вращать изображение по своему усмотрению. А поскольку вы можете применить эти преобразования к состоянию наведения изображения, возможности дизайна практически безграничны.

В этом уроке я покажу вам, как легко создавать совершенно уникальные эффекты наведения курсора на изображения и строки с помощью Divi Builder.

Приступим.

Подглядывание

Вот краткий обзор эффекта наведения Кена Бернса, который можно легко реализовать с помощью опций преобразования Divi.

Разъяснение базовой концепции

Основная концепция создания эффекта наведения Кена Бернса включает использование новых параметров преобразования Divi для масштабирования, расположения и поворота изображения при наведении курсора на это изображение. Вы можете увеличить свойство масштабного преобразования на определенный процент, чтобы изображение увеличивалось при наведении курсора.Вы можете использовать свойство преобразования translate для перемещения изображения по осям x и y. И вы можете повернуть изображение, используя свойство преобразования поворота, установив определенное значение в градусе (в данном случае значение в градусе для поворота по оси x). Наконец, вы можете контролировать продолжительность перехода (скорость) и кривую скорости, чтобы контролировать скорость потока эффекта наведения Кен Бернса. Три свойства преобразования и свойства перехода работают вместе, чтобы создать эффект наведения курсора, который оживит ваши фотографии.

Вы можете легко настроить свойства преобразования и свойства перехода, используя встроенные настройки Divi. Однако ключ к тому, чтобы заставить этот эффект работать, заключается в простой строке css (overflow: hidden), которую необходимо применить к столбцу, содержащему ваше изображение. Поскольку вы собираетесь масштабировать, перемещать и вращать изображение, вы хотите, чтобы переполнение изображения было скрыто за пределами столбца, содержащего его.

Когда у вас есть основная идея и реализована функциональность, становится удивительно, насколько легко можно расположить изображение именно так, как вы хотите, с помощью параметров преобразования Divi.

Загрузите БЕСПЛАТНО Примеры эффектов наведения Кена Бернса

Чтобы получить бесплатные примеры эффектов наведения Кена Бернса, вам сначала нужно загрузить их, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить».Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

После загрузки zip-файла распакуйте папку. Затем импортируйте макет .json с помощью функции переносимости Divi Builder. Или вы можете просто перетащить файл в Divi Builder, используя функцию перетаскивания Divi. Вот и все!

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начало работы с новой страницей

Первое, что вам нужно сделать, это создать новую страницу.Затем присвойте странице заголовок и разверните Divi Builder во внешнем интерфейсе. Затем выберите вариант «Строить с нуля».

Добавление эффекта Кена Бернса к изображению в строке из одного столбца

В этом первом базовом примере я покажу вам, как добавить эффект наведения курсора кен-ожога к одному изображению в строке из одного столбца. Для достижения этого эффекта я буду использовать параметры трансформации масштабирования, перемещения и поворота.

Сначала создайте новый раздел с строкой из одного столбца.Затем добавьте в строку модуль изображения.

Скрытие переполнения столбца

Прежде чем мы начнем обновлять настройки изображения, откройте настройки строки и щелкните вкладку «Дополнительно». Затем добавьте следующий настраиваемый CSS в основной элемент столбца:

 переполнение: скрыто;
 

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

Сохраните настройки строки.

Добавление изображения

Теперь мы можем добавить изображение в модуль изображения. Откройте настройки модуля изображений и добавьте изображение.

Убедитесь, что изображение значительно больше, чем столбец. Это важно, чтобы изображение не выглядело размытым, когда вы масштабируете изображение до большего размера при наведении курсора.Если вы используете настройки по умолчанию для строки из одного столбца, максимальная ширина столбца будет 1080 пикселей. Итак, я использую изображение примерно 1500 пикселей в ширину и 900 пикселей в высоту.

Важно: как правило, чем больше изображение, тем больше места у вас будет для масштабирования, перемещения и поворота изображения без потери качества.

Добавление эффектов наведения при трансформации

Теперь, когда у нас есть изображение, пришло время использовать эти параметры преобразования для создания эффекта наведения Кена Бернса.Перейдите на вкладку дизайна, чтобы открыть параметры преобразования. Активируйте эффекты наведения и выберите вкладку наведения. Теперь любые настройки эффекта преобразования будут применяться только к состоянию наведения курсора на модуль изображения. Затем на вкладке Transform Scale обновите следующее:

Масштаб преобразования по оси X (при наведении): 136%
Масштаб преобразования по оси Y (при наведении): 136%

Затем щелкните вкладку Transform Translate и обновите следующее:

Преобразовать Преобразовать ось X (при наведении): 3%
Преобразовать Преобразовать Преобразовать ось Y (при наведении): 9%

Сдвигает изображение влево на 3% и вниз на 9%.Для этого конкретного изображения я собирался создать эффект, который увеличил бы масштаб и поместил пару в центр окна просмотра столбца.

По умолчанию значения длины перевода будут в пикселях (а не в процентах). Вы можете использовать пиксели для перемещения изображения, но я считаю, что использование процентов делает позиционирование более гибким.

Затем щелкните вкладку Transform Rotate и обновите следующее:

Преобразовать Повернуть ось X (при наведении): 6 градусов

Обновить параметры перехода

Наконец, нам нужно обновить продолжительность перехода (сколько времени требуется для завершения эффекта зависания преобразования) и кривую скорости (функция синхронизации, которая позволяет переходу изменять скорость в течение его продолжительности).В этом примере я хочу, чтобы переход занимал больше времени для более драматичного (и классического) эффекта Кена Бернса при наведении курсора. Для этого перейдите на вкладку «Дополнительно» и обновите параметры перехода следующим образом:

Длительность перехода: 2000 мс (или 2 секунды)
Кривая скорости перехода: линейная (это гарантирует, что скорость перехода не меняется по продолжительности)

Окончательный результат

А теперь посмотрим на окончательный результат. Пусть вас не вводит в заблуждение неоднозначная картинка на гифке ниже. Переход действительно плавный на живом сайте.

Добавление эффекта наведения курсора Кена Бернса к нескольким изображениям в строке из трех столбцов

Если вы хотите добавить эффект наведения курсора на изображения в нескольких столбцах, применяется тот же процесс. Главное, что вам нужно сделать, это убедиться и добавить фрагмент css «overflow: hidden» в каждый столбец, содержащий ваше изображение.

Используя наш предыдущий пример выше, измените структуру столбцов строки на макет из трех столбцов.

Затем обновите настройки строки с помощью пользовательских фрагментов CSS, которые скроют переполнение каждого столбца.

Столбец 1, основной элемент CSS:

 переполнение: скрыто; 

Столбец 2, основной элемент CSS:

 переполнение: скрыто; 

Столбец 3, основной элемент CSS:

 переполнение: скрыто; 

Затем скопируйте модуль изображения и вставьте его в столбец 2 и столбец 3.

Вот и все. Вот окончательный результат.

Поскольку этот дизайн более типичен для макета сетки галереи, вы, вероятно, захотите немного увеличить продолжительность перехода, чтобы сделать анимацию наведения более резкой.Вы можете легко сделать это, используя функцию множественного выбора Divi. Удерживая ctrl или cmd, выберите все модули изображения. Затем щелкните значок шестеренки настроек на одном из изображений, чтобы открыть модальное окно «Параметры элемента».

Теперь любые изменения, внесенные в настройки элемента, будут применяться ко всем изображениям сразу. Обновите параметры перехода в настройках элемента следующим образом:

Продолжительность перехода: 500 мс

Вот действующая новая длительность перехода.

Добавление эффекта наведения Кена Бернса к любому модулю с фоновым изображением

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

Вот как добавить эффект Кена Бернса в текстовый модуль.

Сначала создайте новый обычный раздел со строкой из одного столбца. Затем добавьте в строку текстовый модуль.

Обновите текстовый модуль следующим содержанием:

  
 Мы помолвлены! 
 
 

Затем добавьте в модуль фоновое изображение.Не забудьте добавить изображение достаточно большого размера, чтобы оставить место для масштабирования и перемещения изображения при наведении курсора.

А затем обновите варианты оформления заголовка следующим образом:

Шрифт заголовка: Prata
Размер текста заголовка: 6vw
Пользовательское заполнение: 10vw сверху, 10vw снизу, 3vw слева

Продолжительность перехода: 5000 мс

Теперь добавьте следующие настройки преобразования в текстовый модуль.

Масштаб преобразования по оси X (при наведении): 118%
Масштаб преобразования по оси Y (при наведении): 118%

Преобразовать Преобразовать ось X (при наведении): 6%
Преобразовать Преобразовать Преобразовать ось Y (наведение): 6%

Теперь обновите настройки строки с помощью следующего настраиваемого CSS для столбца.

Основной элемент столбца CSS:

 переполнение: скрыто; 

А теперь посмотрим на результат.

Обратите внимание, как текст и фоновое изображение трансформируются вместе при наведении курсора.

Сочетание эффекта наведения Кена Бернса с дополнительными эффектами наведения

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

Объединение эффекта наведения Кена Бернса с эффектами фильтров

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

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

Откройте настройки текстового модуля и обновите следующий параметр фильтра:

Насыщенность (по умолчанию): 0%
Насыщенность (при наведении): 100%

Этот переход установит для текстового модуля значение насыщенности 0% по умолчанию, что приведет к удалению цвета, сделав его черно-белым.Установка значения 100% при наведении вернет исходный цвет изображения.

Вот заключительный эффект эффекта фильтра в сочетании с эффектом наведения Кена Бернса.

Сочетание эффекта наведения Кена Бернса с эффектами преобразования строки

В этом примере я собираюсь показать вам, как комбинировать эффект наведения курсора ken Burns с дополнительным эффектом преобразования, добавленным к строке. Идея состоит в том, чтобы использовать эффекты преобразования для масштабирования и поворота строки в состояние по умолчанию, а затем восстановить исходный дизайн при наведении курсора.

ПРИМЕЧАНИЕ. Этот метод действительно хорошо работает только для строки из одного столбца с одним модулем. Это связано с тем, что посетителю нужно будет одновременно навести указатель мыши на модуль и строку. Следовательно, модуль должен занимать всю высоту и ширину строки. Дополнительные модули или интервалы нарушат состояние зависания и вызовут проблемы.

Для этого мы собираемся остаться с нашим текущим дизайном текстового модуля, который уже сочетает в себе эффект наведения курсора ken Burns с дополнительным эффектом фильтра.Так что это на самом деле эффект тройного наведения!

Откройте настройки строки, содержащей текстовый модуль. Затем обновите следующее:

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу, 0 пикселей слева, 0 пикселей справа

Это необходимо для того, чтобы не было дополнительных интервалов между текстовым модулем и строкой.


Далее мы собираемся добавить тень блока к строке следующим образом:

Box Shadow: см. Снимок экрана
Box Shadow Blur Strength: 36px
Shadow Color: rgba (0,0,0,0.17)

Теперь добавьте следующие эффекты трансформации:

Масштаб преобразования по оси x (по умолчанию): 70%
Масштаб преобразования по оси X (при наведении): 100%
Масштаб преобразования по оси Y (по умолчанию): 70%
Масштаб преобразования по оси Y (при наведении): 100%

Преобразовать Повернуть ось Y (по умолчанию): 19 градусов
Преобразовать Повернуть ось Y (при наведении): 0 градусов
Преобразовать Повернуть ось Z (по умолчанию): 23 градуса

А теперь посмотрим на окончательный результат.