Разное

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

28.04.2021

Содержание

Увеличение картинок при наведении курсора в статье блога без плагинов

Приветствую вас, уважаемые посетители моего блога

Рад видеть вас снова. Решил в этой статье показать вам один достаточно простой и эффективный способ увеличения изображений при наведении курсора в своих статьях без помощи плагинов и объемных кодов.

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

Способы увеличения картинок в статьях веб-ресурса

В одной из своих прошлых статей я рассказывал, как осуществить подобную функцию с помощью плагина Auto Highslide.

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

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

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

.

.

Если Вам нравится данный способ увеличения картинок в статьях, то читайте дальше, чтобы узнать как осуществить подобное на своём блоге.

Как увеличить изображение при наведении курсора на своём веб-ресурсе

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

onmouseout="this.style.width='100px'"

Скопируйте его и после вставки картинки в редакторе WordPress перейдите во вкладку текст (режим html) и вставьте его в это место:

 <img src="https://saranchinsergey.ru/wp-content/uploads/2014/07/plyazh-mechtyi.png" alt=""ВСТАВЬТЕ КОД СЮДА/>

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

Вы можете изменять ширину картинки, которая показывается изначально. Для этого задайте в коде свои параметры ширины(в пикселях). У меня начальная картинка имеет ширину в 100 пикселей:

Вот и все. Надеюсь, у вас получилось. Если нет, задавайте вопросы в комментариях.

Пользуясь случаем, предлагаю вам прочитать ещё одну полезную статью про то, как создать скриншот экрана монитора. Думаю, вам пригодится эта информация.

До новых встреч в моих новых статьях!

Успехов Вам и Удачи С Уважением,


Другие интересные статьи:

Увеличение картинки при наведении. Плагин WP Image Zoom

5 214

Хотите добавить функцию zoom к изображениям? В этой статье я расскажу, как сделать увеличение картинки при наведении с помощью плагина WordPress.

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

Как добавить увеличение картинки при наведении

Первое, что вам нужно сделать — установить и активировать плагин WP Image Zoom.

Если вы устанавливаете плагин впервые, посмотрите наше видео «3 способа установки плагина».

Увеличение картинки при наведении в товарах Woocommerce

В панели администратора перейдите в новую вкладку WP Image Zoom.

На вкладке «General Settings» вы можете задать настройки изображений товаров Woocommerce, миниатюр, вложений, рубрик и пр. А также есть возможность удалить лайтбокс, чтобы посетители сайта использовали функцию увеличения.

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

Важно: Проверьте типы поддерживаемых лайтбоксов перед включением функции.

Не забудьте сохранить изменения.

Теперь перейдите во вкладку «Zoom Settings».

Сначала выберите тип линзы: круг, квадрат или окно.

Можете сразу проверить, как это будет смотреться.

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

Важно: Некоторые из этих функций доступны только для PRO версии плагина WP Image Zoom.

Теперь перейдите во вкладку «Lenz», чтобы выбрать размер, цвет, настройки рамки линзы и пр.

Важно: Эти настройки применимы к круглой или квадратной линзе.

Если вы выбирали тип линзы «окно», тогда во вкладке «Zoom Window» вы можете настроить ширину и высоту, расположение, расстояние от основного изображения, рамки и пр.

 

Во вкладке «Custom Text» вы можете добавить текст для изображения, выбрать размер, цвет и тип выравнивания.

Не забудьте сохранить все настройки.

Вышеуказанные настройки применяются для изображений товаров Woocommerce.

А теперь разберемся, как задать эту функцию для изображений в записях и на страницах сайта WordPress.

Увеличение картинки при наведении в записях и страницах

К сожалению, эта функция не предоставляется по умолчанию.

Вы можете добавить zoom к изображениям в записях и страницах вручную.

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

Функция zoom часто включается в премиум темы WordPress по умолчанию, но если в вашей теме такого нет, можете использовать плагин WP Image Zoom.

Надеюсь, статья была для вас полезной.

Вам также может понравиться:

Наша подборка бесплатных фотостоков — если вы пока не можете позволить себе Shutterstock.

Набор обязательных плагинов для вашего сайта WordPress.

Чек-лист юзабилити сайта WordPress — проверьте, насколько пользователям удобно на сайте!

Что такое синдикация контента — как повысить трафик сайта.

А также пошаговое руководство «Как сделать сайт на WordPress».

Если у вас есть вопросы, пишите в комментариях.

И подписывайтесь на нас в Facebook, Instagram и Twitter.

Модуль Image Zoom (увеличение при наведении) для Opencart 3 и Опенкарт 2

Модуль Zoom картинок товара при наведении Opencart 2 и Опенкарт 3 — увеличение картинок товара в списке: категория, модули рекомендуемые, последние товары (новинки), хиты продаж (бестселлеры) и др. при наведении мышкой. Очень простой и красивый модуль зума фотографий товаров в Опенкарт.

Английское название: Module Zoom Image Product on Hover in Category and Modules for Opencart

Характеристики дополнения
Совместимость 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0, 2.3.0.0, 2.3.0.1, 2.3.0.2, 3.0.0.0, 3.0.1.1, 3.0.1.2, 3.0.2.0, 3.0.3.0, 3.0.3.1, 3.0.3.2, 3.0.3.3, 3.0.3.5, 3.0.3.6, 3.0.3.7
Ocmod да


Характеристики дополнения
Совместимость 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0, 2.3.0.0, 2.3.0.1, 2.3.0.2, 3.0.0.0, 3.0.1.1, 3.0.1.2, 3.0.2.0, 3.0.3.0, 3.0.3.1, 3.0.3.2, 3.0.3.3, 3.0.3.5, 3.0.3.6, 3.0.3.7
Ocmod да

Марта, 02.03.2018

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

Алексей, 05.10.2018

На версии ocStore 2.3.0.2.3 Работает ?? Все картинки нужно будет загрузить по новому ?

Ответ:

Нет.

Работает сразу после установки.

Наталья, 12.11.2018

Здравствуйте, мне нужен Модуль Image Zoom (увеличение при наведении)
Сможете ли вы адаптировать под мой шаблон?

Ответ:

В техподдержку напишите.

Максим, 03.12.2018

А подскажите, в карточке товара тоже увеличиваются изображения? И если да, то все ли изображения при наведении увеличиваются без нажатия на них? А то встретил модуль в сети, там только первое изображение увеличивается в карточке, а остальные — нужно кликать…

Ответ:

Только на страницах со списками товаров и в стандартных модулях.

Александр, 21.01.2019

Добрый вечер. А добавить функционал для карточки товара нельзя ??? Сколько будет стоить ??? И будет ли работать на OpenCart.Pro Версия 2.3.0.2.5 ???

Ответ:

Напишите в техподдержку с подробностями.

Матвей, 30.03.2019

Что то не запускается OC 3.0.3.1…. Шаблон дефолтный….

Ответ:

Обновите кэш шаблонизатора (кнопка в правом верхнем углу на главной странице админки).

Миша, 11.11.2019

Установил zoom на опенкарт версия 3020 все обновил и не работает

Ответ:

Смотрите логи ocmod, проверьте кэш

Сергей, 31.07.2020

На ocStore 3.0.2.0 — работает на дефолтной теме. На другой не заработало. кэш модификаций и весь кэш чистил

Дмитирй, 26.10.2020

До какого размера zoom будет увеличивать изображение при наведении? Платка в каталоге у меня 200х200, загружаю 500х600.

Ответ:

Увеличение происходит в 2 раза, но в модификаторе это значение можно изменить.

Ольга , 12.11.2020

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

Ответ:

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

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

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

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

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

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

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

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

HTML

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

<div>

    <div>

        <div>

            <img src=»/web-developer/jquery/img/webpage.png» alt=»Web Page» />

            <div></div>

        </div>

    </div>

</div>

Элемент

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

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

CSS стили

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

#iphone{

    /* The iphone frame div */

    width:750px;

    height:400px;

    background:url(‘img/iphone_4G.png’) no-repeat center center;

}

 

#webpage{

    /* Contains the webpage screenshot */

    width:499px;

    height:283px;

    position:absolute;

    top:50%;

    left:50%;

    margin:-141px 0 0 -249px;

}

 

#retina{

    /* The Retina effect */

    background:url(‘/web-developer/jquery/img/webpage.png’) no-repeat center center white;

    border:2px solid white;

 

    /* Positioned absolutely, so we can move it around */

    position:absolute;

    height:180px;

    width:180px;

 

    /* Hidden by default */

    display:none;

 

    /* A blank cursor, notice the default fallback */

    cursor:url(‘img/blank.cur’),default;

 

    /* CSS3 Box Shadow */

    -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

    -webkit-box-shadow:0 0 5px #777;

    box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

 

    /* CSS3 rounded corners */

    -moz-border-radius:90px;

    -webkit-border-radius:90px;

    border-radius:90px;

}

 

#retina.chrome{

    /* A special chrome version of the cursor */

    cursor:url(‘img/blank_google_chrome.cur’),default;

}

 

#main{

    /* The main div */

    margin:40px auto;

    position:relative;

    width:750px;

}

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

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

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

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

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

JQuery скрипт

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

$(document).ready(function(){

 

    /* This code is executed on the document ready event */

 

    var left    = 0,

        top        = 0,

        sizes    = { retina: { width:190, height:190 },

                webpage:{ width:500, height:283 } },

        webpage    = $(‘#webpage’),

        offset    = { left: webpage. offset().left, top: webpage.offset().top },

        retina    = $(‘#retina’);

 

    if(navigator.userAgent.indexOf(‘Chrome’)!=-1)

    {

        /*    Applying a special chrome curosor,

            as it fails to render completely blank curosrs. */

 

        retina.addClass(‘chrome’);

    }

 

    webpage.mousemove(function(e){

 

        left = (e.pageX-offset.left);

        top = (e.pageY-offset.top);

 

        if(retina.is(‘:not(:animated):hidden’)){

            /* Fixes a bug where the retina div is not shown */

            webpage.trigger(‘mouseenter’);

        }

 

        if(left<0 || top<0 || left > sizes.webpage.width ||

            top > sizes.webpage.height)

        {

            /*    If we are out of the bondaries of the

                webpage screenshot, hide the retina div */

 

            if(!retina.is(‘:animated’)){

                webpage.trigger(‘mouseleave’);

            }

            return false;

        }

 

        /*    Moving the retina div with the mouse

            (and scrolling the background) */

 

        retina.css({

            left                : left — sizes.retina.width/2,

            top                    : top — sizes.retina.height/2,

            backgroundPosition    : ‘-‘+(1.6*left)+’px -‘+(1.35*top)+’px’

        });

 

    }).mouseleave(function(){

        retina.stop(true,true).fadeOut(‘fast’);

    }).mouseenter(function(){

        retina.stop(true,true).fadeIn(‘fast’);

    });

});

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

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

Заключение

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


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/
Перевел: Владислав Бондаренко

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

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

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

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

Для начала выберите элемент, на котором вы хотите взаимодействовать, и добавьте внешнее свечение.

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

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

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

В разделе «Преобразования» измените масштаб изображения до 0,95 по осям X и Y.

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

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

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

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

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

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

В разделе «Переходы» добавьте таймер для масштабного преобразования, фильтр оттенков серого и внешнее свечение.

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

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

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

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

Прежде чем продолжить, переключите элемент в состояние наведения курсора.

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

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

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

Добавьте много размытия (50 пикселей!) К внешней тени, чтобы она рассеивалась при наведении.

И, наконец, установите размытие внешнего свечения на 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 градуса

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *