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.

obrazek

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

Na początek pokażę wam jak wpływać na rozmiar obrazu przy jednoczesnym nie wychodzeniu z kontenera. Czyli w praktyce obraz będzie się powiększał, ale nie będzie nachodził na sąsiednie elementy. 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.

powiekszają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="powiekszają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 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)

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

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/