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

kursy tutoriale

Kategoria wpisu Kurs 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ż

Skrócenie zbyt długiego tekstu z użyciem CSS text-... Tym razem chcę pokazać jak skrócić tekst nie mieszczący się bloku np. tytuł wpisu na blogu do jednej linii co może być przydatne na responsywnej stron...
Animowana ikona „Hamburger” menu Jak zapewne każdy z was zauważył, że na niektórych stronach internetowych (głównie mobilnych) menu pokazuje się dopiero po kliknięciu w ikonę (trzy li...
Animacja ikon, obrazków na przykładzie dłoni Dziś postaram się pokazać jak w prosty sposób uzyskać efekt animowanej ikony (małego obrazka) na stronie internetowej. Na początek warto zapoznać s...
Wstęp do SASS – Instalacja i podstawowe kome... SASS jest rozszerzeniem języka kaskadowych styli CSS (preprocesorem) umożliwiającym wydajniejszą pracę. Oczywiście nie jest to jedyny tego typu skrypt...