Po ostatnim wpisie dalej zostajemy w klimatach efektów i animacji zdjęć, jakie możemy osiągnać przy użyciu wtyczki The Divi Builder albo za pomocą kodów CSS. Ostatnio pokazaliśmy Wam, jak w kilka sekund wyklikać efekt powiększania zdjęcia, w znaczeniu powiększania całego elementu. Więc po najechaniu kursorem myszy na dany element np. obraz, albo na cały wiersz czy sekcję powoli się on powiększał, a następnie wracał do rzeczywistego rozmiaru. Więcej o tej animacji możecie przeczytać w artykule Animacje i efekty zdjęć: powiększenie obrazu jako całego elementu.  Dzisiaj skupimy się na powiększeniu dodanego zdjęcia, ale w kadrze, co oznacza, że jeżeli dodamy zdjęcie na naszą stronę, to powiększy się tylko obraz, ale nie wysunie się za kadr naszego elementu. Wszystko dokładnie możecie zobaczyć poniżej 🙂

Powiększanie obrazu bez wychodzenia za kadr elementu

Efekt jaki widzicie powyżej jeszcze do niedawna można było osiągnąć używając poniższego kodu: 

Dzisiaj znajomośc tego triku wydaje się nie być konieczna, ponieważ taki sam efekt uzyskamy za pomocą ustawień wtyczki The Divi Builder. Żeby to zrobić, dodaj nowy wiersz. W ustawieniach wiersza przejdź na zakładkę Zaawansowane, a następnie w pozycji Niestandardowy CSS znajdź pole Główny element kolumny i wklej tam poniższy kod:

[css] overflow: hidden; [/css]

Następnie wstaw moduł Obraz. Przejdź na zakładkę Design i skieruj się do ustawień Transform. Wybierz opcje Hover, a następnie w pozycji Transform Scale zmień wartość podaną w procentach na większą niż 100%. W naszym przykładzie powyżej użyliśmy wartości 115%. Teraz przedź na zakładkę  Zaawansowane i zmien ustawienia Transition. Transition Duration to prędkość z jaką będzie animował Twój obraz. W naszym przykładzie jest to 5000ms. 

Powiększanie tła dowolnego elementu

Podobny efekt do tego, który zastosowaliśmy ze zdjęciem, możemy użyć w przypadku każdeg dowolnego elemenu, wybierając jako tło – obraz.  Poniżej przykład animacji z modułem Tekst.

Dodaj nowy wiersz i w Zaawansowanych ustawieniach, w pozycji Niestandardowy CSS w polu Główny element kolumny dodaj kod:

[css] overflow: hidden; [/css]

Przejdź do ustawien wstawionego modułu – w naszym przypadku jest to Tekst, dodaj tło, następnie przejdź na zakładkę Design i Zaawansowane, aby zmienić ustawienia dla opcji Transform i Transition. Uzyskany efekt powinien być podobny to tego poniżej.