Utwórz powiększenie obrazu za pomocą CSS na Hover w WordPress

Cześć chłopaki,

Dzisiaj przedstawiam wam bardzo prosty tutorial, ale myślę, że może on być dla was bardzo przydatny.

Zobaczmy, jak możemy stworzyć obraz z powiększeniem po najechaniu myszą, jak poniżej:

Instrukcja wideo

Pierwszą rzeczą, jaką zamierzamy zrobić, jest dodanie klasy do obrazu, dzięki czemu możemy zastosować styl wyłącznie do tego obrazu, a nie do wszystkich obrazów w sieci.

W przypadku mojej strony byłoby to:

<img class="zoom" src="https://comohacerunapagina.es/wp-content/uploads/2018/05/imagen-aleatoria.jpeg" alt="imagen aleatoria con zoom">

Teraz, gdy mamy już utworzoną klasę, dodamy css, w tym celu dostosujemy -> Dodatkowe css:

Oto kod, którego potrzebujesz:

.zoom {
    transition: transform .2s; 
}

.zoom:hover {
    transform: scale(1.5); 
}

Powyższy css składa się z dwóch części:

Powiększ obraz

CSS odpowiedzialny za te części jest następujący:

.zoom:hover {
    transform: scale(1.5); 
}

Chociaż ten kod doskonale tworzy Zoom, jest bardzo gwałtowny, ponieważ przechodzi z jednej pozycji do następnej bez stanów pośrednich.

Przechodzenie z jednego stanu do drugiego stopniowo

Aby zobaczyć płynną animację między obiema pozycjami, dodajemy do css następującą część:

.zoom {
    transition: transform .2s; 
}

Tutaj mówimy mu, aby przekształcił się z pozycji początkowej do końcowej w 0.2 sekundy.

Zmieniając czas, zmieniamy szybkość transformacji.

To, co widzisz, jest bardzo proste i może być bardzo przydatne