Ostatnio zajmuje się projektem, który dał mi możliwość zabawy arkuszem styli. Mianowicie miałem przygotować zakładkę ” Zespół – Team „. I w sumie nic w tym skomplikowanego, zdjęcie, imię i nazwisko i przekierowanie do konkretnej zakładki danej osoby gdzie znajduje się szczegółowy opis i cała reszta. Jednak chciałem zrobić coś oryginalnego, coś bardziej kreatywnego niż zwykłą prezentację zdjęcia. Wpadłem na pomysł że można by było przedstawić daną osobę w dwóch odsłonach – profesjonalnie i bardziej na luzie. Mianowicie, po najechaniu myszką na dane zdjęcie, danego członka ekipy, fotografia zmieniała by się z profesjonalnej na tą na luzie. I przy użyciu prostego kodu CSS uzyskałem taki efekt:
Aby to osiągnąć taki efekt odpalamy Elementor, i tworzymy sobie sekcje składającą się w moim przypadku z trzech kolumn. Kolejno w wybranej przez nas kolumnie, wybieramy edycję i przechodzimy do zakładki zaawansowane.
W pierwszej kolejności w zakładce zaawansowane, w miejscu Klasy CSS musimy nadać nazwę w naszej kolumnie. W moim przypadku będzie to kolumna1 ( oczywiście nazwę każdy z nas może nadać sobie dowolną ). Co jest ważne. Każda kolumna z innym członkiem zespołu musi mieć inną nazwę Klasy CSS. W przeciwnym razie, w każdej z kolumn będzie nam się wyświetlało to samo zdjęcie.
Kolejnym krokiem będzie przejście do zakładki Custom CSS na samym dole sekcji zaawansowane. W tym miejscu wklejamy poniższy kod CSS:
.kolumna1 {
background-image:url(„URL pierwszego zdjęcia„);
background-repeat: no-repeat;
background-position: top center;
background-size: 350px;
transition-duration: 1s;
}
.kolumna1:hover {
background-image:url(„URL drugiego zdjęcia„);
background-repeat: no-repeat;
background-position: top center;
background-size: 350px;
}
Teraz krótkie objaśnienie powyższego kodu. Korkiem numer jeden jaki powinniśmy zrobić to w miejsce background-image:url wstawić adresy URL naszych zdjęć, które chcemy aby się wyświetlały jako główne i po najechaniu myszką.
W kodzie nie ma nic skomplikowanego:
Hover // selektor, który odpowiada za animacje, która ma się wykonać po najechaniu myszką.
background-repeat: no-repeat // odpowiada za powtarzanie się naszej zdjęcia, a dokładnie w naszym przypadku za brak powtarzania, ponieważ wartość no-repeat spowoduje że nasze zdjęcie nie będzie się powtarzać.
background-position: top center // dzięki tej funkcji ustawiamy pozycję początkową naszego zdjęcia, a dzięki wartości top center zacznie ono nam się wyświetlać od górnej krawędzie na środku.
background-size: 350px // jest to nic innego jak ustawienie gabarytu naszego zdjęcia.
transition-duration: 1s // jest to wartość dzięki której ustawiamy czas przejścia animacji.
I oto w taki sposób uzyskaliśmy pożądany efekt zmiany naszego tła na inne po najechaniu myszką.