Raşit Tunca Board

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

RasitTunca