Wszyscy wiemy, jak nieograniczone dostosowywanie uzyskuje się dzięki Kreatorowi stron internetowych Elementor . Dzięki temu dostosowaniu możemy poprawić wrażenia użytkownika i być kreatywnym w tym, co tworzymy.
Efekt Logo Swap on Hover polega na tym, że gdy użytkownik najedzie kursorem na logo umieszczone na Twojej stronie, automatycznie zmieni ono jego szczegóły tj. kolor, kształt czy kontur. W tym samouczku zrozumiemy, jak utworzyć zamianę logo na efekt najechania za pomocą Elementora .
Jak utworzyć efekt zamiany logo przy najechaniu za pomocą elementu Elementor
Wiesz już jaki jest efekt i masz w głowie pomysły na to, co chcesz stworzyć, przejdźmy dalej i zobaczmy jak.
Aby rozpocząć, dodaj wewnętrzną sekcję widżetów.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć teraz
Następnie musisz dodać kolumnę do początkowo utworzonej sekcji. W tym samouczku będziemy używać struktury dwukolumnowej .
Następnie przeciągnij i upuść widżet obrazu do utworzonej kolumny.
Aby efekt zadziałał, potrzebne będą dwa zdjęcia. Jeden ma być wyświetlany normalnie, a drugi wyświetlany, gdy użytkownik umieści kursor.
Możesz użyć dwóch wariacji tego samego logo lub użyć dwóch zupełnie różnych zdjęć, możliwości są nieograniczone.
Po wybraniu obrazu w niestandardowym polu CSS wklej następujący kod CSS, aby zmiana logo działała po najechaniu kursorem.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}I zrobione! Opublikuj swoją stronę, aby zobaczyć podgląd i zobaczyć, jak wygląda efekt na Twojej stronie. Wróć, aby wprowadzić zmiany, jeśli chcesz.
W ten sposób możesz stworzyć efekt Logo Swap On Hover za pomocą Elementora . Dołącz do nas na Facebooku i Twitterze, aby być na bieżąco z naszymi postami.
