Rabu, 11 April 2012

Cara Membuat Efek Hover Pada Gambar Dengan CSS3


By on 15.21

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='http://3.bp.blogspot.com/-_ec5iYVk1zI/T1eBHBLrDVI/AAAAAAAAV7k/sILa7Pya9jI/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='http://3.bp.blogspot.com/-uWSQ0i4xmTg/T1eDFMoC2uI/AAAAAAAAV8k/SzU4cbRRP18/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='http://1.bp.blogspot.com/-Qgso-mMLB24/T1eC3NomVRI/AAAAAAAAV8c/Gzo_tQRyIuI/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='http://1.bp.blogspot.com/-XPujdPc4uxM/T1eCZydJ3eI/AAAAAAAAV8M/DR4XkfIOLaI/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='http://1.bp.blogspot.com/-GvzU8QaNK9I/T1eBsrU7a9I/AAAAAAAAV70/18nv16scTKo/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='http://4.bp.blogspot.com/-V_f_5a9j3ak/T1eCpBj9y0I/AAAAAAAAV8U/neufQUaseWo/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.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

0 komentar:

Posting Komentar