We weten allemaal hoe grenzeloos maatwerk wordt met Elementor Website Builder . Met die aanpassing kunnen we de gebruikerservaring verbeteren en creatief zijn in wat we creëren.
Logo Swap on Hover-effect is wanneer de gebruiker zijn cursor op het logo plaatst dat op uw website is geplaatst, het verandert automatisch de details, dat wil zeggen kleur, vorm of omtrek. In deze zelfstudie gaan we begrijpen hoe u een logo-swap bij het hover-effect kunt maken met Elementor .
Hoe een Logo Swap On Hover-effect te creëren met Elementor
Je weet al wat het effect is en hebt ideeën in je hoofd over wat je wilt creëren, laten we verder gaan en kijken hoe.
Voeg om te beginnen een binnenste gedeelte toe voor de widgets.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nu
Vervolgens moet u een kolom toevoegen in uw oorspronkelijk gemaakte sectie. Voor deze zelfstudie gaan we uit van de structuur met twee kolommen .
Sleep vervolgens de afbeeldingswidget naar de kolom die u hebt gemaakt.
Om het effect te laten werken, hebt u twee afbeeldingen nodig. De ene moet normaal worden weergegeven, terwijl de andere moet worden weergegeven wanneer de gebruiker zijn cursor plaatst.
U kunt twee varianten van hetzelfde logo gebruiken of twee totaal verschillende afbeeldingen gebruiken, de mogelijkheden zijn eindeloos.
Plak na de afbeeldingsselectie in het aangepaste CSS- veld de volgende CSS-code om het wisselen van logo bij het zweefeffect te laten werken.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}En klaar! Publiceer uw pagina om een voorbeeld te bekijken en te zien hoe het effect eruitziet op uw website. Kom terug om eventuele wijzigingen aan te brengen als je wilt.
Zo creëer je het Logo Swap On Hover effect met Elementor . Zorg ervoor dat u zich bij ons aansluit op onze Facebook  en Twitter om op de hoogte te blijven van onze berichten.
