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ż

Paski przewijania (scroll) CSS – overflow Czasami zdarza, się że zawartość elementu (kontenera) jest większa niż przewidziana na jego ilość. Szerokość i wysokość jest są zbyt małe by pomieścić...
Dopasowywanie obrazka do rozmiaru obszaru CSS3 ... Dzięki właściwości object-fit jesteśmy w stanie określić w jaki sposób interesujący nas element HTML (np. obrazek) powinien wypełnić dany obszar na st...
Odstępy pomiędzy literami w słowie CSS letter-spac... Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy w...
Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...