Мы все знаем, как безграничная настройка получает с Строитель веб-сайта Elementor. С помощью этой настройки, мы можем повысить пользовательский опыт и быть творческим в том, что мы создаем.
Логотип Swap на hover эффект, когда пользователь помещает свой курсор на логотип, размещенный на вашем сайте, он автоматически изменяет свои детали, т.е. цвет, форму или контур. В этом учебнике, мы будем понимать, как создать логотип своп на наведении эффект с Элементор.
Как создать логотип своп на наведении эффект с помощью элементаора
Вы уже знаете, что эффект и идеи в вашем уме о том, что вы хотите создать, давайте двигаться вперед и посмотреть, как.
Для начала добавьте внутренний раздел для виджетов.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчас
Далее необходимо добавить столбец в первоначально созданном разделе. Для этого учебника, мы будем идти с двумя колонками структуры.
Затем перетащите и опустите виджет изображения в созданный вами столбец.
Для того, чтобы эффект работал, вам потребуется две картинки. Один из них должен отображаться нормально, а другой будет отображаться, когда пользователь размещает свой курсор.
Вы можете использовать две вариации одного и того же логотипа или использовать две совершенно разные картинки, возможности безграничны.
После выбора изображения в пользовательском поле 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 с эффектом Элементор. Убедитесь в том, чтобы присоединиться к нам на наших Фейсбук и щебетать, чтобы оставаться в курсе наших постов.
