Sweet Image Effect Hover With CSS3

Baiklah Dalam posting saya kali ini saya akan menunjukkan kepada sobat sekalian bagaimana Cara membuat efek Image Hover dengan CSS..
Di bawah ini saya memberikan snapshot image hover dgn css:

Nah dan untuk melihat demonya silakan klik disini.

HTML

<div class='imgaka' id='imgaka-1'><div class='mask'></div>
<img src='URL-GAMBAR' />
</div>   
<div class='imgaka' id='imgaka-2'><div class='mask'></div>
<img src='URL-GAMBAR' />
</div>   
<div class='imgaka' id='imgaka-3'><div class='mask' id='mask-1'></div><div class='mask' id='mask-2'></div>
<img src='URL-GAMBAR' />
</div>   
<div class='imgaka' id='imgaka-4'><div class='mask'></div>
<img src='URL-GAMBAR' />
</div>   
<div class='imgaka' id='imgaka-5'><div class='mask'></div>
<img src='URL-GAMBAR' />
</div>   
<div class='imgaka' id='imgaka-6'><div class='mask'></div>
<img src='URL-GAMBAR' />
</div>

CSS

.imgaka{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);float:left;margin-left:-55px;margin-right:-65px;margin-top:-50px;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-o-transition-duration:0.5s;}
.imgaka img{width:405px;height:235px;padding:10px;border:1px solid #fff;}
.imgaka: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;}   
.imgaka .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;}
#imgaka-1:hover .mask{height:0%;}
#imgaka-2:hover .mask{height:0%;margin-top:130px;}
#imgaka-4:hover .mask{margin-left:219px;margin-top:135px;height:0%;width:0%;}
#imgaka-3 #mask-1 {width:50%;}
#imgaka-3 #mask-2{width:50%;margin-left:211px;}
#imgaka-3:hover #mask-1{width:0%;}
#imgaka-3:hover #mask-2{margin-left:430px;width:0%;}
#imgaka-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);}
#imgaka-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);}

KET::
- Silahkan Ganti teks yang berwarna MERAH dengan URL Gambar sobat. Sedangkan
- Teks yang berwarna HIJAU adalah lebar dan Tinggi gambar, silahkan dirubah sesuai keinginan yah. :D

Jika info ini menarik bagi sobat-sobat seklian jgn lpa untuk meninggalkan komentarnya yah.hehee..

Selamat Mencoba ya all. goodluck..

Sumber : ut2a-4down