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

kursy tutoriale

Kategoria wpisu Efekty i skrypty CSS, Kursy Tagi: , , , , on przez .



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.

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

Przeczytaj również

Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Podstawowe kolory na stronie W przypadku budowy strony internetowej dość ważne jest użycie odpowiednich kolorów. O ile dzięki CSS możemy użyć ich kilka set a może nawet kilka tysi...
Responsywne obrazki / zdjęcia z efektem Polaroid &... W jednym z wcześniejszych wpisów pisałam jak z użyciem PHP uzyskać efekt Polaroid dla zdjęć i ilustracji. Tym razem pokażę jak uzyskać ten sam efekt a...
10 responsywnych frameworków CSS (RWD) W ciagu ostatnich kilku lat budowanie stron z pomocą frameworków CSS stało się bardzo popularne. W wcześniejszych wpisach opisywałam już jeden z popul...