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

Czas czytania: 3 minut

Podczas tworzenia stron internetowych często najważniejszą kwestią jest dobranie odpowiednich efektów aktywowanych np. po najechaniu kursorem myszy lub podczas przewijania strony (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, obrazu (czyli efekt zoom lub Shrink). W tym wpisie postaram się nieco przybliżyć ten efekt na przykładzie poniższego zdjęcia.

powiększenie obrazka animacja

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

Na początek pokażę wam jak wpływać na rozmiar obrazu przy jednoczesnym ograniczeniu rozmiaru w formie kontenera. Czyli w praktyce chodzi o to by obraz się powiększał. Przy czym ustawie go tak by nie nachodził na sąsiednie elementy. Efekt ten otrzymamy poprzez ograniczenie jego rozmiaru do otaczającego go kontenera. Skrypt jest stosunkowo prosty i potrafi nieco ożywić stronę internetową każdą stronę internetową. powiększeniem

Jeżeli chcecie uruchomić animacje wystarczy przesunąć kursor myszy na obrazek.

powiększający się obrazek

Jak widać efekt jest dość ciekawy. Zaraz się też przekonacie, że powiększanie obrazków w CSS jest też dość proste – trzeba tylko wiedzieć jak. Przejdźmy zatem do tego jak uzyskać taki zoom na grafice. Nasz kod HTML będzie więc wyglądać następująco:

<div class="przyklad">
     <img class="alignleft size-medium wp-image-7000" src="https://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-300x300.jpg" alt="powiększający się obrazek" width="300" height="300" />
</div>

Jak widać grafika została umieszczona w elemencie okalającym DIV. To on w naszym przypadku pełni rolę kontenera, ogranicznika rozciągania się obrazu. Teraz by ten efekt osiągnąć w CSS piszemy następujący kod:

.przyklad{
    overflow: hidden;
    padding: 0;
    width: 300px;
    height: 300px;
border:1px solid #000;
}
.przyklad img {
    transition-duration: 3s;
    margin: 0 auto;
    display: block;
}
.przyklad img:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    z-index: 0;
}

Takie ustawienie daje nam możliwość np. umieszczenia obrazka w kolumnie obok tekstu. Tak więc ma praktyczne zastosowanie w budowie stron internetowych.

Jeśli chodzi o efekty zastosowane przez zemnie tutaj to przykład wykorzystuje efekt pseudo elementu :hover pisałam już o nim kilka razy na blogu oraz właściwości CSS:

Zmniejszenie rozmiaru obrazka (Shrink)

Analogicznie możemy dokonać zmniejszenia obrazka (w praktyce bez znaczenia jest początkowy rozmiar istotne jest jedynie by posiadał odpowiednie style kaskadowe). W tym celu można zmienić kod następująco:

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

    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);

na liczbę dziesiętną:

    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
powiekszają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ę

.przyklad img{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transition-duration: 3s;
    margin: 0 auto;
    display: block;
}
.przyklad img:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    z-index: 0;
}
powiekszający się obrazek

Co jest najistotniejsze w kodzie efektu?

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

overflow: hidden;

Usunięcie z CSS tej właściwości spowoduje uzyskanie zupełnie innego efektu:

powiekszający się obrazek

Teraz obrazek będzie mógł rozciągnąć się poza wyznaczony obszar, zakrywając podczas trwania efektu (czyli czasu kiedy mamy na nim kursor myszy) innych elementów. Konkretnie tych, które znajdują się obok niego.

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

transition-duration: 3s;

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 w CSS

Powyższe przykłady pokazują jedynie sytuację kiedy mamy jeden pojedynczy obrazek, my jednak czasem będziemy potrzebowali takich obrazków więcej. Dlatego też przygotowałam wersję z powiększeniem i pomniejszeniem obrazków w obrębie otaczającego kontenera dla kilku. Taka mini galeria na stronę internetową.

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 poniżej lub skontaktować się bezpośrednio ze mną np. na Facebooku.

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

https://www.aurainweb.pl/2017/08/5-prostych-efektow-na-obrazkach-z-wykorzystaniem-hover-css/