Five CSS3 Hover Effects by Alessio Atzeni

Tidak tahu mau bilang apaan mengenai tutorial bertemakan hover image Secara khusus trick hover memang banyak sampai kepala mumet dibuatnya :d Siapa lagi jika bukan Master Mary Lou dari codrops team web yg selalu mengeluarkan trik edan punya :p Kelemahan dalam hal masakan mungkin terlalu banyak gaul dengan kode-kode HTML sehingga lupa sama bumbu dapur :))
Beben Koben si bloglang anu ganteng kalem tea kembali mau berbagi trick CSS3 hover effects created by Master Alessio Atzeni. Silahkan kunjungi web sumber dan download filenya dari sana ;)) Gue cuma mau menerangkan saja versi Indonesia :p Pada halaman demo terdapat 5 macam style hover efek (firsteffect, secondeffect, thirdeffect, fourtheffect and fiftheffect.css) Koben ambil opsi yg secondeffect.css

Ke semua gaya tersebut di tagging oleh default code .view CSS dasar yg mengcover keseluruhan lima macam effects hover!
KODE CSS

.viewImg {
   width: 300px;
   height: 200px;
   margin: 10px;
   overflow: hidden;
   position: relative;
   text-align: center;
   border: 5px solid #fff;
   box-shadow: 0px 0px 5px #333;
}
.viewImg .mask {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: absolute;
}
.viewImg a.info {
   background: url(GAMBAR-SEARCH-ICON.PNG) center no-repeat;
   padding: 0;
   width: 20px;
   height: 20px;
   display: inline-block;
   text-indent:-9999px;
}

Aturlah width & height pada kode CSS baris pertama viewImg untuk menampilkan gambar yg akan tampak pada area postingan nanti. Sekarang tinggal memasukan bumbu CSS opsi secondeffect.

KODE SECOND-EFFECT

.second-effect .mask {
opacity: 0;
overflow: visible;
border: 0px solid rgba(0,0,0,0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.second-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity: 1;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

Markup HTML atau penulisan syntax.<div class="viewImg second-effect">
<img src="BLAH-BLEH-BLOH.jpg" />
<div class="mask">
<a href="BLAH-BLEH-BLOH.com" class="info">Read More</a>
</div>
</div>Syntax HTML di setiap jenis hover effect berbeda. Bila sobat mau lebih dari 1 jenis gaya hover, maka tinggal tambahkan saja kode CSS di folder css dari data donwloadan pd web sumber (yang berakhiran .css)
Good luck :)

http://jsbin.com/ovajij

Bonus:
http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/
http://www.webdesignshock.com/css3-drop-shadow
Happy hover \m/