DENTASARIM | Tasarımın bizden!

Css resim efektleri

Merhaba arkadaşlar...

Bazen resimlerinizin efektlere ihtiyaçları oluyor, photoshop bilmeyen arkadaşlarımız oluyor, bu yüzden basit bir kod ile resminizi efektlendirebilirsiniz...

1. Resme Siyah-Beyaz Efekti Verme

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

2. Resme Bulanıklık Efekti Verme

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

3. Resme Şeffaflık Efekti Verme

body img { 
opacity:0.3; 
}
body img:hover { 
opacity:1; 
}

4. Resme Zoom Efekti Verme

body 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; 
}
body img:hover { 
-webkit-transform: scale(1.1); 
-moz-transform: scale(1.1); 
-o-transform: scale(1.1); 
transform: scale(1.1); 
}

Bu kodlar sayesinde fotoğraflarınız güzel gözüksün. Teşekkürler...