VGH: Jak dodać efekt zoom

Stosując CSS3, bez jQuery możemy w łatwy sposób uzyskać efekt zoomu, czyli powiększania się zdjęcia lub bloku tekstowego po najechaniu na niego kursorem. Aby poznać szczegóły zapraszam do rozwinięcia posta. Wersje demonstracyjną można zobaczyć TUTAJ.

1. Dodaj lub edytuj już istniejący panel (lewy lub prawu):

Panel Administracyjny -> Zarządzanie stroną -> Zarządzanie panelami.

2. Skopiuj i dodaj poniższy kody w treść panelu:

<style type="text/css">
/*------Efekt zoomu by Fantagiro------*/
.nazwa_klasy {
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
}


.nazwa_klasy:hover {
-webkit-transform:scale(1.20);
-moz-transform:scale(1.20);
-o-transform:scale(1.20);
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
}
</style>

• W miejsce nazwa_klasy należy umieścić nazwę klasy lub pseudoklasy do której ma się odnosić CSS.
• Wartości powyżysz atrybutów transformacji i przejścia możecie oczywiście zmienić wg własnego upodobania, są one podane jako przykład.

3. Zapisz panel i pamiętaj aby go włączyć.

Przeglądarki: kod jest czytany przez firefoksa, chrome, safari i operę.

Przykłady klas:

• img:hover - będzie odnosić się do wszystkich zdęć na stronie;
• .tbl1:hover - będzie powiększał m.in teści newsów, ktore są wyświetlane w dwóch kolumnach, treści w forum.

Brak zoomu w wybranych grafikach

Może się zdarzyć taka sytuacja, że stosując zoom do zdjęć nie chcesz aby ten efekt był widoczny w topie strony (baner/header), ikonkach bullet, ikonkach postów w forum lub innych grafikach, wtedy należy wartości atrybtów ustawić na none.

Przykład - nie chcesz aby top strony był powiększany przez zoom, więc potrzebujesz klasę topu strony (patrz poradnik "Edytujemy skórke").

Dla dużej liczby styli tą klasą będzie: .full-header

<style type="text/css">
.full-header img:hover {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
}
</style>

Jeśli to ma być dowolna grafika to możesz dodać pseudoklasę, np dla:

• ikonek bullet: img[src*="bullet.gif"]:hover
• emotikon: img[src*="images/smiley"]:hover