Dalam postingan kali ini, saya ingin sedikit berbagi tentang Script CSS yang dapat digunakan untuk memberikan efek blur terhadap image/gambar. Efek tersebut akan muncul ketika terjadi Hover/Mouse Over. Sebelum mempraktekkannya, berikut adalah demo programnya.
Kode programnya sebagai berikut :
<head>
<title>CSS Image Hover Effect</title>
<style type="text/css">
#center{ text-align:center; padding:auto auto auto auto;}
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
</head>
<body>
<a class="linkopacity" href="#">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/372647_1407358206_942353789_q.jpg" border="0" style="border:1px solid
black;" width="50" height="50" /></a>
<a class="linkopacity" href="#">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/372647_1407358206_942353789_q.jpg" border="0" style="border:1px solid
black;" width="50" height="50"></a>
<a class="linkopacity" href="#">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/372647_1407358206_942353789_q.jpg" border="0" style="border:1px solid
black;" width="50" height="50"></a>
</body>
Selamat mencoba, semoga sukses. Happy Codding :)
