Skip to content Skip to sidebar Skip to footer

Tutorial Image Hover Dengan CSS Filter Effects

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%);

Tutorial Image Hover Dengan CSS Filter Effects

2. Filter sepia

     -webkit-filter: sepia(100%);

Tutorial Image Hover Dengan CSS Filter Effects


3. Filter brightness

    -webkit-filter: brightness(50%);

Tutorial Image Hover Dengan CSS Filter Effects


4. Filter contrast

    -webkit-filter: contrast(200%);

Tutorial Image Hover Dengan CSS Filter Effects


5. Filter grayscale+contrast

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

Tutorial Image Hover Dengan CSS Filter Effects


6. Filter blur

     -webkit-filter: blur(5px);

Tutorial Image Hover Dengan CSS Filter Effects


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

2 comments for "Tutorial Image Hover Dengan CSS Filter Effects"