Untuk membuat efek hover opacity dari gambar yang di hover oleh mouse langkah pertama kita siapkan file CSS untuk mengatur tampilan hover, misalnya beri nama file style.css
Tuliskan kode berikut :
.button_opacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
}
.button_opacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1;
}
.button_opacity img {
border:1px solid #ccc;
}
Buat sebuah file html untuk menampilkan format CSS diatas , beri nama file index.html, tuliskan kode berikut :
<html>
<head>
<title>www.ilmudesain.web.id</title>
<!--Untuk Menghubungkan halaman style.css dan index.html-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a class="button_opacity" href="http://www.ilmudesain.web.id">
<img src="button.png" /></a><!--Gunakan class button_opacity untuk gambar yang akan di ubah opacitynya-->
</body>
</html>
Jika penulisan kode css maupun kode html nya cocok, maka hasilnya lihat pada browser Anda :
Password PDF : www.ilmudesain.web.id
3 comments:
keren....
wah..masih terasa membingungkan bagi saya sebagai pemula ni,,,
mohon bimbingan nya saya pemula .....?
Post a Comment
Please Your Comment