Nous savons tous à quel point la personnalisation est illimitée avec Constructeur de site Web Elementor. Avec cette personnalisation, nous pouvons améliorer l’expérience utilisateur et être créatifs dans ce que nous créons.
Logo Swap sur l’effet Hover est lorsque l’utilisateur place son curseur sur le logo placé sur votre site Web, il change automatiquement ses détails, c’est-à-dire la couleur, la forme ou le contour. Dans ce tutoriel, nous allons comprendre comment créer un échange de logo sur l’effet vol stationnaire avec Élémenteur.
Comment créer un échange de logo sur l’effet hover à l’aide d’Elementor
Vous savez déjà quel est l’effet et avez des idées dans votre esprit sur ce que vous voulez créer, allons de l’avant et voir comment.
Pour commencer, ajoutez une section interne pour les widgets.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer Maintenant
Ensuite, vous devez ajouter une colonne dans votre section initialement créée. Pour ce tutoriel, nous allons aller avec la structure à deux colonnes.
Faites ensuite glisser et laissez tomber le widget d’image dans la colonne que vous avez créée.
Pour que l’effet fonctionne, vous aurez besoin de deux images. L’un doit être affiché normalement, tandis que l’autre à afficher lorsque l’utilisateur place son curseur.
Vous pouvez utiliser deux variantes du même logo ou utiliser deux images entièrement différentes, les possibilités sont illimitées.
Après la sélection d’images, dans la pâte de champ CSS personnalisée, code CSS suivant pour faire fonctionner l’échange de logo sur l’effet vol stationnaire.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}Et c’est fini ! Publiez votre page pour prévisualiser et voir à quoi ressemble l’effet sur votre site Web. Revenez faire des changements si vous voulez.
C’est ainsi que vous pouvez créer l’effet Logo Swap On Hover avec Élémenteur. Assurez-vous de vous joindre à nous sur notre Facebook Facebook Facebook et Gazouiller pour rester à jour sur nos messages.
