Получить мгновенный хостинг с Plaseor и Premizer Pro

С CDN, SSL и резервными копиями.

Начните сегодня

Как добавить логотип своп на наведении эффект с помощью элементаора

Muneeb Учебные пособия по WordPress May 9, 2021

Мы все знаем, как безграничная настройка получает с Строитель веб-сайта Elementor. С помощью этой настройки, мы можем повысить пользовательский опыт и быть творческим в том, что мы создаем.

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

Как создать логотип своп на наведении эффект с помощью элементаора

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

Для начала добавьте внутренний раздел для виджетов.

Скачать Divi Лучшая тема WordPress

Самая популярная тема WordPress в мире и Ultimate Page Buildress Page Builder

Скачать Divi

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

Затем перетащите и опустите виджет изображения в созданный вами столбец.

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

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

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

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

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

Таким образом, вы можете создать эффект Logo Swap On Hover с эффектом Элементор. Убедитесь в том, чтобы присоединиться к нам на наших Фейсбук и щебетать, чтобы оставаться в курсе наших постов.