Wir alle wissen, wie grenzenlos etenklose Anpassung mit Elementor Website Builder wird. Mit dieser Anpassung können wir die Benutzererfahrung verbessern und kreativ sein in dem, was wir erstellen.
Logo Swap on Hover-Effekt ist, wenn der Benutzer seinen Cursor auf dem Logo auf Ihrer Website platziert, ändert es automatisch seine Details, d. h. Farbe, Form oder Umriss. In diesem Tutorial werden wir verstehen, wie man einen Logo-Swap auf Hover-Effekt mit Elementor erstellt.
So erstellen Sie Logo Swap on Hover-Effekt mit Elementor
Sie wissen bereits, was der Effekt ist und haben Ideen im Kopf, was Sie erstellen möchten, lassen Sie uns vorankommen und sehen, wie.
Fügen Sie zunächst einen inneren Abschnitt für die Widgets hinzu.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangen
Als Nächstes müssen Sie eine Spalte in dem ursprünglich erstellten Abschnitt hinzufügen. Für dieses Tutorial werden wir mit der zweispaltigen Struktur gehen.
Ziehen Sie dann das Bild-Widget in die von Ihnen erstellte Spalte.
Damit der Effekt funktioniert, werden Sie zwei Bilder benötigt. Eine wird normal angezeigt, während die andere angezeigt wird, wenn der Benutzer den Cursor platziert.
Sie können zwei Variationen des gleichen Logos oder zwei völlig unterschiedliche Bilder verwenden, die Möglichkeiten sind grenzenlos.
Fügen Sie nach der Bildauswahl im benutzerdefinierten CSS-Feld den folgenden CSS-Code ein, damit der Logoaustausch auf den Hovereffekt funktioniert.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}Und fertig! Veröffentlichen Sie Ihre Seite, um eine Vorschau anzuzeigen und zu sehen, wie der Effekt auf Ihrer Website aussieht. Kommen Sie zurück, um Änderungen vorzunehmen, wenn Sie möchten.
So können Sie den Logo Swap On Hover-Effekt mit Elementor erstellen. Achten Sie darauf, uns auf unseren Facebook und Twitter zu begleiten, um über unsere Beiträge auf dem Laufenden zu bleiben.
