Tidak tahu mau bilang apaan mengenai tutorial bertemakan hover imageSecara 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,
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;
} KODE SECOND-EFFECT
Good luck :)
http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/
http://www.webdesignshock.com/css3-drop-shadow
Happy hover \m/
.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.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;
}
<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/
http://alexdunphy.github.com/refineslide/
Sebenarnya kalau jenis ini mah cocok banget bagi yg sering bermain dengan konten dummies! Jadi tidak usah capek dan pusing dalam memberikan contoh dengan syntax img ;)
Lantas bagaimana bila kepingin customize background dan warna huruf secara instant! Syntax
