19 Nisan 2016 Salı

WordPress Resimlere Css İle Efekt Verme

WordPress sitemizde resimlerin üzerine geldiğimizde çeşitli efektler vererek resimlerimizi biraz hareketlendirebiliriz.

Kodları Blog Hocam sitesinden aldım ve wordpress’e uyarlayıp düzenleyerek veriyorum. Kodları temanızdaki style.css’ın en altına ekleyiniz.

1. Resimlere Siyah-Beyaz Efekti Verme

#content p img{
filter: grayscale(0); 
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0); 
-o-filter: grayscale(0); 
-ms-filter: grayscale(0); 
}
#content p img:hover { 
filter: grayscale(1); 
-webkit-filter: grayscale(1); 
-moz-filter: grayscale(1); 
-o-filter: grayscale(1); 
-ms-filter: grayscale(1); 
}

2. Resimlere Bulanıklık Efekti Verme

#content p img{
filter: blur(0); 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-o-filter: blur(0); 
-ms-filter: blur(0); 
}
#content p img:hover { 
filter: blur(5px); 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
}

3. Resimlere Şeffaflık Efekti Verme

#content p img{
opacity:1; 
}
#content p img:hover { 
opacity:0.3; 
}

4. Resimlere Zoom Efekti Verme

#content p img{
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
}
#content p img:hover { 
-webkit-transform: scale(1.1); 
-moz-transform: scale(1.1); 
-o-transform: scale(1.1); 
transform: scale(1.1); 
}

Yorum Yapın