TUTORIAL CSS IMAGE HOVER PADA THUMBNAIL MENJADI BURAM – Di tutorial yang ini kita akan membuat sebuah image thumbnail yang jika di sorot dengan mouse atau mouse hover akan berubah menjadi seperti buram, tentunya kita telah sering melihat thumbnail yang serupa dengan itu di berbagai website lainnya, sehingga terlihat suatu perbedaan yang terlihat lebih bagus.
Kita akan mencoba membuatnya agar terlihat seperti itu. caranya cukup sederhana, hanya dengan mengedit css. Langkah – langkahnya adalah anda cari terlebih dahulu class dari image itu, di blog ini class image thumbnail yaitu .featured-thumbnail img
Setelah class nya ketemu tambahkan sebuah class baru di style.css template milik anda dengan menambahkan sebuah hover dibelakang nya dan letakkan dibawahnya. lihat seperti contoh dibawah ini.
[php]/*—Default : —-*/
.featured-thumbnail img {
margin-bottom: 0;
width: 100%;
}[/php]
[php]/*——-Diberi hover:–*/</pre>
.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;
}[/php]
Baca juga: CARA MEMBUAT RELATED POST BERBAGAI PILIHAN DI WORDPRESS
