[Raşit Tunca]

CSS ile Resimlere Efekt Verme

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

Code:

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

Code:

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

Code:

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

4. Resme Zoom Efekti Verme

Code:

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...