WordPress'te Hover'da CSS ile Görüntü Yakınlaştırma Oluşturun

Selam millet,

Bugün size çok basit bir eğitim veriyorum ama sizin için çok faydalı olabileceğini düşünüyorum.

Aşağıdaki gibi farenin üzerine gelindiğinde yakınlaştırma ile nasıl bir görüntü oluşturabileceğimizi görelim:

Video öğretici

Yapacağımız ilk şey görüntüye bir sınıf eklemek, böylece web'deki tüm görüntülere değil, yalnızca bu görüntüye stil uygulayabiliriz.

Web sitem durumunda şöyle olurdu:

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

Artık sınıfı oluşturduğumuza göre css'yi ekleyeceğiz, bunun için Özelleştir -> Ek Css'ye gideceğiz:

İşte ihtiyacınız olan kod:

.zoom {
    transition: transform .2s; 
}

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

Yukarıdaki css iki bölümden oluşur:

Resmi yakınlaştır

Bu bölümlerden sorumlu CSS aşağıdaki gibidir:

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

Bu kod Zoom'u mükemmel yapsa da, ara durumlar olmadan bir konumdan diğerine geçtiği için çok ani olur.

Yavaş yavaş bir durumdan diğerine geçiş

Her iki pozisyon arasında düzgün bir animasyon görmek için css'e aşağıdaki kısmı ekliyoruz:

.zoom {
    transition: transform .2s; 
}

Burada 0.2 saniye içinde başlangıç ​​konumundan bitiş konumuna dönüşmesini söylüyoruz.

Zamanı değiştirerek dönüşümün hızını değiştiririz.

Nasıl görebilirsin çok basit ve çok faydalı olabilir