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

kursy tutoriale

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



Reading Time: 3 minutes

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ż

Przykładowe generatory gradientów CSS Samodzielne tworzenie gradientów w CSS jest dość trudnym i mozolnym zajęciem. W większości przypadków uzyskane w ten sposób efekty nie do końca spełni...
Animacja w CSS – Transitions, czyli efekty p... Witam w kolejnym moim wpisie poświęconym animacją na stronach internetowych. Jak każdy wie jest to temat dość ciekawy i można o nim jeszcze bardzo duż...
Zakładanie własnej strony internetowej Jeżeli chcemy założyć własną stronę internetową nie musimy wcale udawać się do specjalisty. Każda osoba korzystająca z  internetu może bowiem sam utwo...
Ciekawe rozwiązania dla formularzy logowania i rej... W kolejnym w kolejnym wpisie poświęconym inspiracją przygotowałam dla was ciekawe rozwiązania dla formularzy logowania i rejestracji. Podobnie jak wcz...