Tema İçerisinde Bulunan Resimlerin Üzerine Geldiğinde Resimler Renklensin

Başlıkta belirttiğimiz gibi temanızın içerisinde bulunan görsellerinizde aşağıdaki kodları yerleştirdiğinizde bütün resimleriniz siyah beyaza çevirerek ama yalnız üzerine fare ile gelindiğinde renklenmesini istiyorsanız hatta tam tersinide yapabilirsiniz yani fare ile görsellerinizin üzerine geldiğinizde siyah beyaz olur tek yapmanız gereken aşağıdaki kodları tanımak ve gerekli yere temanızın css kısmına yerleştirmek.

Önçe bir resim paylaşmak istiyoruz bu resimde görüldüğü gibi resimler siyah beyaz şeklinde peki bir alttaki resme inelim ve;

Alttaki resimde görüldüğü gibi fare ile resmin üzerine gelindiğinde resmin renklendiğini görebilirsiniz.

Aşağıdaki kodu alıp düzenleyip ve temanızın uygun yere yerleştirmeniz yeterli olacaktır.

.test-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.test-img:hover {
width: 0 auto;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

Karışıklık olmasın diye basit bir şekilde ufak bir kod yazdık bu kodu yazmamızın sebebi kolaylık olsun diye bilgi amaclı verilmiştir.

Kodu nasıl yerleştirdiğimize aşağıdaki kod pençeresinden bakabilirsiniz.

<!DOCTYPE html>
<html>
<header>
<title>Test Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
.test-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.test-img:hover {
width: 0 auto;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
</style>

</header>
<body>
<div class="test-img"><a href="https://www.biryoo.com" target="_blank"><img src="images/whiteandblack.png"></a></div>
</body>
</html>

Not: Örneğin images klasörün içerisine kaydettiğiniz resimler üzerinde oynama yapmaz bozmaz. Hatta wordpress içerisinde yukarıdaki işlemleri kod bilginiz var ise değişiklikler yapabilirsiniz.

Şimdilik bu kadar hoşca kalın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir