Tutorial Image Hover Dengan CSS Filter Effects

Pada label TUTORIAL BLOG sudah ada tutorial image hover, tutorial yang akan aku berikan di entri ini agak berbeda yaitu Tutorial Image Hover Dengan CSS Filter Effects. Artinya apabila kita meletakkan kodenya maka image atau gambar yang ada di blog efeknya hover apabila gambar disentuh cursor. Ada 6 jenis image filter effects yang akan aku tuliskan kode beserta contoh gambarnya sekalian: 

1. Filter grayscale

     -webkit-filter: grayscale(100%);

2. Filter sepia

     -webkit-filter: sepia(100%);

3. Filter brightness

    -webkit-filter: brightness(50%);

4. Filter contrast

    -webkit-filter: contrast(200%);

5. Filter grayscale+contrast

    -webkit-filter: grayscale(100%) contrast(150%);

6. Filter blur

     -webkit-filter: blur(5px);

Ada dua pilihan cara meletakkan kodenya yaitu:

Pertama:

Tata Letak > Tambahkan Gadget >  HTML/JavaScript dan letakkan kode di bawah ini

<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
kode css filter
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Pada tulisan kode css filter ganti dengan salah satu kode no 1-6 di atas sesuai dengan keinginan Anda.

Kedua: yaitu dengan meletakkan salah satu kode no 1-6 diatas di template:

Dasbor > Template > edit HTML dan cari kode:

img {
}
img:hover{
  -webkit-filter: grayscale(100%); (contoh kode)
}

Kode di atas ada di bawah  /* Content  kemudian tekan simpan template. Ada blogger yang suka membuat image effect hover, kalau anda juga suka silahkan untuk mengambil kodenya, dan lebih baik kalau kodenya ditaruh dalam template (terserah anda).