Image Hover

Ada yang mau gak, kalo kalau image dihover, bakal keluar text. line preview? KLik dibawah:

Line Preview

Kalau mau, read more!

Simple/Denim/Desgin

• First, blogger >> tata letak >> tambahkan gadget >> HTML/Java Script
• isi judulnya, lalu, di kolom post, pastekan kode ini:

<style>
.box1 img {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.box1 .effect {background-color: #FFF; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1 h2 {background: #FBEBED; margin: 20px 40px 0px 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1 text {color: #333; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}
.box1 a.info {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}
.box1:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1:hover .effect {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box1:hover h2,.box1:hover text,.box1:hover a.info {-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box2 {width: 300px; height: 200px; margin: 10px;float: center; border: 1px solid #fff; overflow: hidden; position: relative; text-align: center; background: #fff;}
.box2 .effect,.box .content {width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0;}
.box2 img {display: block; position: relative;}
.box2 h2 {text-transform: uppercase; color: #AAA; font-family: font yang kamu mau; text-align: center; position: relative; font-size: 15px; padding: 5px; margin: 10px; background-color: #FBEBED; margin: 0px; margin-top: 10px; margin-bottom: 10px;}
.box2 text {font-family: Font yang kamu mau; font-style: normal; font-size: 11px; position: relative; color: #000; padding: 10px; text-align: center; margin: 2px;}
</style>

tulisan yang dibold dan udnerline, kamu ganti dengan font yang kamu mau, ya!

• Dibawah semua kode itu, pastekan:

<div class="box2 box1">
<img src="Url image" />
<div class="effect">
<h2>
helow, change with your title!</h2>
<text>Guys,you may change with your text! Dont be copycat for make this!</text>
</div>
</div>

• Save!

Yang di bold dan underline, kamu ubah sendiri ya! Kalau gak ngerti bahasa inggris, silahkan ke translate.google.com ^^

Kalau yang blogskins nanti y!