Belajar Web: Membuat Efek Pada Gambar

Ketiklah Kode Seperti Berikut :

<html>
<head>
<title>Membuat Efek Pada Gambar</title>
<style type="text/css">
/* Efek Goyang */

img {
margin: 5px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);

}

/* Efek Glow */

img {
margin: 5px;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

/* Efek Bergulung */

img {
-webkit-transition-duration:.4s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .9.9;border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

</style>
</head>
<body>

<img src="arema.jpg">

</body>
</html>

Membuat Efek Pada Gambar