Cara Membuat Efek Hover Pada Gambar Dengan CSS3 Di Blogger

Cara Membuat Efek Hover Pada Gambar - Pada posting kali ini saya akan menjelaskan cara membuat efek hover pada gambar, efek hover ini ada 6 macam jenis, dengan menggunakan efek hover ini bisa mempercantik tampilan gambar di blog kamu. Kamu boleh lihat demo nya DEMO . Gimana keren, kamu bisa membuat efek hover ini dengan CSS3 terbaru tanpa memerlukan kode yang lain, jika sobat tertarik bagaimana cara membuat efek hover pada gambar silahkan ikuti langkah - langkah di bawah ini.

CSS3

<style>
.img{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
float:left;
margin-left:-50px;
margin-right:-50px;
margin-top:-10px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img img{
padding:10px;
border:1px solid #fff;
width:400px;
height:225px;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(0.8);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform:scale(0.8);
-o-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-4:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-5:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(-360deg);
}
#img-6:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateZ(750deg);
-moz-transform: rotateZ(750deg);
-o-transform: rotat(750deg);
}
</style>

HTML KODE

<div id='image-container'>
<div class='img' id='img-1'>
<div class='mask'></div>
<a target="_blank" href="http://www.hqwallpaper.in/2012/03/amazing-asian-babe.html"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCR8zCBYpekx5Lcoc0ozJNBpe3wFk6xmwzrjj3-j0wH-23VLcEbo3kFbAxCRfMn0p17a2T5g9TIu8HPCiGE8Yy76D2aJTPWCGSy9kqz2cD4C2QK_RCL_4OQhn9C_-dqRubDAtkGWcsVyg/s320/Amazing-Asian-Babe-by-hqwallpaper.in.jpg' /></a>
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<a target="_blank" href="http://www.hqwallpaper.in/2012/03/love-in-action.html"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ58nf_K0-MSyWT6-JdCYLZLVo5t8144gofQ4XCubv9jKia7rfELRcH2PUzURUFNQbNjmasA_XnnYQtXvaHt8z2VsOAmEJV1xCFLoiYczlPlzYaDo17rG2OrojG1CR2aBZUYJgZN2Y7CE/s320/Love-In-Action-by-hqwallpaper.in.jpg' /></a>
</div>
<div class='img' id='img-3'>
<div class='mask' id='mask-1'></div>
<div class='mask' id='mask-2'></div>
<a target="_blank" href="http://www.hqwallpaper.in/2012/03/london-bridge-evening.html"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6_AfjcSqMBuZ5HsQj9dAlcZmxfEdtBderrAVrLH4YNSrxipRlkjnnvuS1mPQiM7KmEpGdGp_6mEvzkTzyttcZMX8UvLQkNsgnF6IkKmdMNLcUojQN700VD-HXnY-dkEN6I04kSS883Q/s320/London-Bridge-Evening-by-hqwallpaper.in.jpg' /></a>
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<a target="_blank" href="http://www.hqwallpaper.in/2012/03/green-ocean-holiday.html"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEAiYUkSAELbQGedaoExtfZEPfyANS9PzpGWGBeFLVQOKHuaydNtOH6UGQrEvC3lc3dZMW1tRIbBcXpjXH5VV7BX4bQrV2hQqaVfPP_Rq-IiVutIqBFSbC6H7z6Tbq0nT4LsCWScUTv8/s320/Green-Ocean-Holiday-by-hqwallpaper.in.jpg' /></a>
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<a target="_blank" href="http://www.hqwallpaper.in/2012/03/beautiful-girl-with-nature.html"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyCcVFwMrNqccCktssEoqwn1lmcUZVABqle8uyh9-h5IL6Hk3lCDG5eoT4igeZXgp8asdvUmZFi_fNhZ0ddGflVPLCc0UQ1BZkTmbAm0ORuMl2qQvEbzLa8aZ3psxHenMFjtPsp-VdrfU/s320/Beautiful-Girl-With-Nature-by-hqwallpaper.in.jpg' /></a>
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<a target="_blank" href="http://www.hqwallpaper.in/2012/03/greeny-apple-smashing.html"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGTJ8ekxGgUAeI05g0BCu-IPN92WtA8VPasjdITVUxZaLOr-sraLlS8sd4PAAYIERUn3liuOY450yeeygFbt-yq5mgCay2f5NOqpNf3YjnyubZFPmhpvu09P8fM3wo0OUZmjODrpG31-I/s320/Greeny-Apple-Smashing-by-hqwallpaper.in.jpg' /></a>
</div>
<div class='clearfix'></div>
</div>
<div class='clearfix'></div>

Ganti kode yang berwarna merah dengan URL gambar.
Ganti kode yang berwarna biru dengan URL yang dituju.

Cara menggunakan nya Pilih Add Gadget > HTML JavaSrcipt >copy kode CSS3 dan HTML code di satukan.