:hover pada selektor img.Pertama-tama, carilah arahan yang tampak ibarat ini:
img { background-color:#fafafa; border:1px solid #dcdcdc; padding:5px; }Tidak usah terfokus pada deklarasi-deklarasi di dalamnya. Cukup fokus pada selektor img. Kode di atas yakni komponen khusus untuk mengatur tampilan gambar-gambar di halamanmu. Kita dapat mengetahui itu alasannya selektor img intinya memang berasal dari tagnya, yaitu <img>
Jika sudah ketemu, salinlah arahan ini, lalu letakkan di bawahnya:
img:hover { /* Secara teoritis untuk IE 8 & 9 (lebih valid) */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* Ini juga bekerja di IE 8 & 9 ... juga 5, 6, 7 */ filter:alpha(opacity=50); /* browser Firefox usang di bawah Firefox 0.9 */ -moz-opacity:0.5; /* Safari 1.x (pra WebKit!) */ -khtml-opacity:0.5; /* Moderen! * Firefox 0.9 +, Safari 2?, Chrome yang lain? * Opera 9 +, IE 9 + */ opacity:0.5; }Klik Simpan Template. Sekarang kita masuk ke tahap pemahaman lebih lanjut.
Pemahaman Lebih Lanjut:
Meskipun selektor img:hover mempunyai begitu banyak jenis properti opacity, namun intinya hanya satu saja yang dipakai, yaitu tergantung dari peramban apa yang sedang kita pakai. Sedangkan mengenai nilai opacity, nilai 1 atau 100 sama artinya dengan solid, sedangkan nilai 0 sama artinya dengan tembus pandang SEPENUHNYA.