Membuat Efek Hover Opacity


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

Artikel Menarik Lainnya :



3 comments:

jam on 13 February 2011 at 07:35 said...

keren....

nday on 14 February 2011 at 01:13 said...

wah..masih terasa membingungkan bagi saya sebagai pemula ni,,,

jawa.axl on 16 March 2011 at 18:57 said...

mohon bimbingan nya saya pemula .....?

Post a Comment

Please Your Comment

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Dapatkan Update artikel IDG ke email Anda

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin