Świnicki w Sieci

Zmiana obrazu tła po najechaniu myszką / CSS & WordPress

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ą.

CHCESZ BYĆ NA BIEŻĄCO?

ZAPISZ SIĘ DO MOJEGO NEWSLETTERA
JUŻ DZIŚ.

Uzupełnienie powyższego pola stanowi zgodę na otrzymywanie od ŚWINICKI W SIECI z siedzibą w Zgorzelcu newslettera zawierającego treści informacyjne, marketingowe dotyczące portalu www.swinickiwsieci.pl. Zgodę można wycofać w każdym czasie. Wycofanie zgody nie ma wpływu na zgodność z prawem przetwarzania dokonanego przed jej wycofaniem.