Sexy Hover for Image using CSS3

Tidak tahu sudah berapa banyak trick hover Beben Koben si bloglang anu ganteng kalem tea bagi buat kalian sobat² tercinta :x :"> Silahkan diacak-acak saja pada kotak pencarian ;) Namun sudah banyak juga, tetapi masih saja menarik perhatian buat dibahas. Karena unik & gaya daya tarik tersebut bisa menjadi acuan pembahasan kali ini.
Come from designs tutorial talked about how to make sexy image hover effects using CSS3 b-) http://designstutorial.com/ web yang menyuguhkan beraneka ragam artikel mancap punya.
Seksi efek hover pada gambar ini menghasilkan transform:scale() (zoom effect), transition-duration (timing process) and transform:rotate (efek berputar-putar) :P

Selain variabel lainnya, dikombinasikan menjadi satu kesatuan terciptalah kreasi sexy ;))

Basic CSS 3

.img {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
float: left;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img:hover {
cursor: pointer;
-webkit-transform: scale(0.7);
-webkit-box-shadow: 0px 0px 20px #555;
-moz-transform: scale(0.7);
-moz-box-shadow: 0px 0px 20px #555; 
-o-transform: scale(0.7);
-o-box-shadow: 0px 0px 20px #555; 
}

Kode diatas memakai uniqueID .img sehingga dalam pemakaian nanti menggunakan atribute class="img" Code transform: scale(0.5) menjadikan gambar ke skala yang lebih kecil. Perhatikan nominal (0.5), makin kecil ya jadi kecil, makin besar nominalnya ya makin besar :D Sorot gambar dibawah berikut (worked on full posted methode)

Hover gambar disamping kiri dan itu merupakan coded dasar efek CSS 3 seksih, sekarang mari kita masukan bumbu ajaib guna menampilkan efek full stylish :))

.img .mask{
width: 100%;
background-color: rgba(191,138,64,.9);
position: absolute;
height: 100%;
-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: 120px;
}
#img-4:hover .mask{
margin-left: 200px;
margin-top: 115px;
height: 0%;
width: 0%;
}
#img-3 #mask-1 {
width: 50%;
}
#img-3 #mask-2{
width: 50%;
margin-left: 200px;
}
#img-3:hover #mask-1{
width: 0%;
}
#img-3:hover #mask-2{
margin-left: 400px;
width: 0%;
}
#img-5:hover .mask{
margin-left: 219px;
margin-top: 135px;
height: 0%;
width: 0%;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
}
#img-6:hover .mask{
height:0%;
margin-top:225px;
}

Kode HTML

<div class='img' id='img-1'>
<div class='mask'></div>
<img src='http://LINK-IMAGE.JGP'/>
</div>

<div class='img' id='img-2'>
<div class='mask'></div>
<img src='http://http://LINK-IMAGE.JGP' />
</div>

<div class='img' id='img-3'>
<div class='mask' id='mask-1'></div>
<div class='mask' id='mask-2'></div>
<img src='http:http://LINK-IMAGE.JGP' />
</div>


<div class='img' id='img-4'>
<div class='mask'></div>
<img src='http://http://LINK-IMAGE.JGP' />
</div>

<div class='img' id='img-5'>
<div class='mask'></div>
<img src='http://http://LINK-IMAGE.JGP' />
</div>

<div class='img' id='img-6'>
<div class='mask'></div>
<img src='http://http://LINK-IMAGE.JGP' />
</div>

Demo Sexy Image Hover Effects using CSS3

demo Sexy Hover for Image using CSS3

Original Efecto Hover

From Gem@ created

MAIN TITLE

Descriptions Of Title

Gem@