CSS3 - Image Filter Effect

Posting kali ni saya nak kongsi mengenai kod CSS3 untuk membuat efek filter pada gambar. Disini saya akan menunjukkan beberapa jenis filter yang boleh digunakan di blogger anda. Kalau nak gunakan kat website pun boleh....Cube anda sentuh contoh gambar2 dibawah untuk lihat efek k..

Efek filter + Hover

HUE ROTATE

CONTOH: HUE ROTATE

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: hue-rotate(360deg); -webkit-filter:hue-rotate(360deg); -moz-filter:hue-rotate(360deg); -o-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

GREYSCALE

CONTOH: GREYSCALE

img{ box-shadow:0px 0px 0px #333; transition:1500ms -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

BLUR

CONTOH: BLUR

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

SATURATE

CONTOH: SATURATE

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: saturate(500%); -webkit-filter: saturate(500%); -moz-filter: saturate(500%); -o-filter: saturate(500%); -ms-filter: saturate(500%); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

SEPIA

CONTOH: SEPIA

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: sepia(1); -webkit-filter: sepia(1); -moz-filter: sepia(1); -o-filter: sepia(1); -ms-filter: sepia(1); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

INVERT

CONTOH:  INVERT

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

BRIGHTNESS

CONTOH: BRIGHTNESS

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

CONTRAST

CONTOH: CONTRAST

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: contrast(0.3); -webkit-filter: contrast(0.3); -moz-filter: contrast(0.3); -o-filter: contrast(0.3); -ms-filter: contrast(0.3); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

OPACITY

CONTOH: OPACITY

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ opacity:0.3; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }


Efek filter tanpa Hover

HUE ROTATE img{ filter: hue-rotate(360deg); -webkit-filter:hue-rotate(360deg); -moz-filter:hue-rotate(360deg); -o-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); }	GRAYSCALE img{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); }	BLUR img{ filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); }
SATURATE img{ filter: saturate(500%); -webkit-filter: saturate(500%); -moz-filter: saturate(500%); -o-filter: saturate(500%); -ms-filter: saturate(500%); }	SEPIA img{ filter: sepia(1); -webkit-filter: sepia(1); -moz-filter: sepia(1); -o-filter: sepia(1); -ms-filter: sepia(1); }	INVERT img{ filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); }
BRIGHTNESS img{ filter: brightness(50%); -webkit-filter: brightness(200%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); }	CONTRAST img{ filter: contrast(0.3); -webkit-filter: contrast(0.3); -moz-filter: contrast(0.3); -o-filter: contrast(0.3); -ms-filter: contrast(0.3); }	OPACITY img{ opacity:0.3; }