Tutorial CSS image hover pada thumbnail Menjadi Buram

Tutorial kali ini membuat image thumbnail jika di sorot mouse atau mouse hover akan berubah menjadi buram, tentunya kita sering melihat thumbnail seperti itu di berbagai website, sehingga terlihat perbedaan yang terlihat bagus.

Thumbnail blog saya juga terlihat seperti itu jika di sorot, saya akan mencoba memberikan tutorial agar terlihat seperti itu. caranya cukup simple, hanya edit css. Langkah-langkahnya adalah cari terlebih dahulu class dari image tersebut, di blog saya class image thumbnail adalah .featured-thumbnail img

Setelah ketemu tambahkan class baru di style.css template anda dengan menambahkan hover dibelakang nya letakkan dibawahnya. lihat contoh dibawah ini.

/*---Default : ----*/ .featured-thumbnail img { margin-bottom: 0; width: 100%; } /*-------Diberi hover:--*/ .featured-thumbnail img:hover { transition: all 2s ease; opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; background: transparent; }