Efekt Zoom Hover po najechaniu kursorem na zdjęcie, obrazek

kursy tutoriale

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (3 głosów, średnia: 3,33 z 5)
Loading...

Podczas tworzenia stron internetowych często najważniejszą kwestią jest dobranie odpowiednich efektów aktywowanych np. po najechaniu kursorem myszy lub podczas przewijania (scroll). Powinny być one nie tylko ciekawe, ale i wykorzystywane z umiarem.

Jednym z takich efektów jest powiększenie lub zmniejszanie (skalowanie rozmiarów) zdjęcia (efekt zoom lub Shrink). Postaram się nieco przybliżyć ten efekt na przykładzie poniższego zdjęcia.

obrazek

Powiększający się obrazek bez wychodzenia poza kontener

Skrypt jest stosunkowo prosty i potrafi nieco ożywić stronę internetową.

Przykładowe powiększenie ilustracji czyli zoom. W celu uruchomienia efektu należy umieścić kursor myszki na obrazku:

powiekszenie

W HTML wygląda to następująco

W CSS

Jak widać obrazek nie wychodzi mimo powiększenia poza obramowanie, dzięki czemu nie zasłania znajdujących się obok elementów mieszczących się w tej samej lub innej szpalcie (kolumnie).

Zmniejszenie obrazka (Shrink)

Analogicznie możemy dokonać zmniejszenia obrazka. W tym celu można zmienić kod następująco:

Kod, dzięki któremu obrazek się powiększał przekształcamy (.przyklad img:hover)

na liczbę dziesiętną:

zmniejszający się obrazek

W powyższym przykładzie wielkość obrazka jest taka jak na początku – jeśli chcecie by nie zostawało białe tło musicie najpierw powiększyć obrazek a następnie go zmniejszyć np. poprzez zamianę

zmniejszający się obrazek

Co jest najistotniejsze w powyższym kodzie?

Jest kilka istotnych elementów, które wpływają na wygląd i właściwości danego efektu. Przykładowo usunięcie właściwości

Z powoduje uzyskanie zupełnie innego efektu

wychodzący poza ramkę

Teraz obrazek będzie mógł rozciągnąć się poza wyznaczony obszar zakrywając podczas trwania efektu inne elementy.

W kodzie dość istotny jest również:

Czyli czas trwania efektu, to dzięki niemu nie następuje natychmiastowe powiększenie obrazka i uzyskujemy płynność. Oczywiście szybkość można zmieniać modyfikując ten parametr. O właściwości transition już pisałam wcześniej.

Inne przykłady powiększających się obrazów

Powiększenie i pomniejszenie w obrębie otaczającego kontenera

See the Pen
Image hover – Zoom effect in CSS
by Aura (@Julka85)
on CodePen.

Powiększenie poza kontener

See the Pen
Sticky Note in CSS
by Aura (@Julka85)
on CodePen.

Jeżeli macie jakieś pytania odnośnie powyższego kodu możecie zostawić je w formie komentarza.

Inne efekty aktywowane po najechaniu na obiekt kursorem myszki znajdziecie w poniższym wpisie:

5 prostych efektów na obrazkach z wykorzystaniem hover – CSS

dodatkowe tagi:
kurs html, www zoom, zoom na grafice powiększenie obrazka, hover bez jquery, zoom photo, image, site, page zoom, show on hover, css effects, mouse, rozmiary zdjęć, zmiana wymiaru, transformacja, skalowanie obrazu, zmiana rozmiaru, Efekt Zoom Hover po najechaniu kursorem na zdjęcie, obrazek, powiększenie obrazka po najechaniu myszką css