kursy tutoriale

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 (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ł, ale nie będzie nachodził na sąsiednie elementy. Gdyż będzie ograniczony przez rozmiary otaczającego go kontenera. Skrypt jest stosunkowo prosty i potrafi nieco ożywić stronę internetową każdą stronę internetową.

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

powiększający się obrazek

Jak widać efekt jest dość ciekawy. Przejdzmy 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;

Z powoduje 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 inne elementy.

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

Powiększenie i pomniejszenie w obrębie otaczającego kontenera

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.

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/

%d bloggers like this: