Elementor: как изменить изображение при наведении на текст

Вы хотите изменить изображение при наведении курсора на текст с помощью кнопки Page Builder Elementor ? В этом новом уроке мы покажем вам, как это сделать.

Если вы понятия не имеете, о чем мы хотим поговорить сегодня, предлагаем вам посмотреть следующее видео:

Тогда давайте вернемся к тому, почему мы здесь.

Также откройте наш гид по:  Как создать карту эффекта из портфолио с помощью Elementor

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

Создадим раздел с 2 столбцами, затем на боковой панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и установите ползунок на 100.

Во вкладке Стиль давай выберем это Тип фона нажав классический, затем измените оттенок из #F9F9F9

Во вкладке Передовой, изменить все Внутренние поля из 25

Теперь давайте изменим ширину столбца на 40% для левой колонки и 60% для правой колонки.

В левой колонке давайте бросим Виджет текстового редактора, затем вставьте в него текст и измените Размер заголовка текст на Название 3.

Во вкладке Передовой, введите как Внутренние поля 10-25-10-30 соответственно для верхнее, правое, нижнее и левое внутренние поля

В разделе фон вкладка Передовой, нажмите на ОБЗОР, затем выберите тип фона из классический, давайте введем его цвет #DFF5FF et Продолжительность перехода из 0.5.

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

Теперь переходим в раздел границыи нажмите на ОБЗОР, затем выберите Продолжить для тип границы et давайте отключим связь между границей Хватать 4 для левая граница. Давайте выберем цвет # 002FA7 и добавьте продолжительность перехода к 0.5

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

В разделе граница, вернемся на вкладку НОРМАЛЬНЫЙ, давайте выберем тип границы на Продолжить, отключим привязку между границами, хватаем 4 для левой границы и сделайте ее очень прозрачной.

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

Читайте также: Как отобразить текст над изображением с помощью Elementor

Давайте продублируем этот текст дважды и изменим тексты каждого содержание так.

В правом столбце перетащите Виджет изображения, и вставляем изображение из нашей библиотеки.

Мы собираемся создать пространство вокруг этого изображения, перейдя к Продвинутая вкладка столбца и введите 10 – 10 – 10 – 50 для всех внутренних полей сверху, справа, снизу и слева.

Выбираем изображение и во вкладке Передовой из последних, давайте перейдем к разделу Эффекты движения затем Входная анимация, Выбрать Fade В

Заходим в раздел Передовой на вкладке «Дополнительно» и добавьте несколько имен классов в поле «Классы CSS». Итак, давайте все-img-img-1

Дублируем наше изображение 2 раза.

Давайте выберем второе изображение и изменим img-1 на img-2, затем изменим изображение на новое изображение.

См. Также: Как создать галерею изображений с Elementor

Для третьего изображения давайте просто изменим img-1 на img-3, а затем заменим изображение на новое изображение.

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

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Если у вас нет этого раздела, значит, у вас нет версии Pro, если вы хотите продолжить, вам необходимо обновить версию).

Давайте выберем наш первый текстовый редактор и перейдем на вкладку «Дополнительно» и Раздел атрибутов. В поле Атрибуты, скопируйте и вставьте следующий фрагмент кода:

data-showme|img-1

Сделайте это для других текстовых редакторов, изменив img-1 на img-2 или на img-3.

Теперь мы собираемся добавить виджет HTML на нашу страницу. Скопируйте и вставьте следующий скрипт:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

Теперь сохраните или обновите свою страницу, а затем просмотрите ее.

Вот и все, вы легко справились с этой задачей.

Получите Elementor Pro прямо сейчас!

Заключение

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...