Tuesday, December 25, 2012

Tutorial : Image Hover Text #4

Tumblr_mfhpr13cjx1qc7belo2_1280_large

Assalamualiku semua, OK ini hari atin nak tunjuk korang buat image hover yang ke 4 punya.. maybe sama yang sebelumnya tapi sedikit beerlainan hovenya :D.. hope u like it.. you want try? ..

LIVE PREVIEW


     
  • Template designer paste dalam HTML/GADGET 
  • Blogskin Ikut step bawah ni:
  
 Dashboard > Template > Edit HTML
 Tekan ctrl + f (serentak) dan cari code </style>
 Copy code bawah ni:

<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: calibri; 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: calibri; font-style: normal; font-size: 11px; position: relative; color: #000; padding: 10px; text-align: center; margin: 2px;}
</style>
<br />


 Paste code tadi di bawah </style>
 Next , copy code yang bawah ni pula
<br />
<div class="box2 box1">
<img src="http://data.whicdn.com/images/46976936/tumblr_mfhpr13cjx1qc7belo2_1280_large.png" />
        <br />
<div class="effect">
<h2>
Welcome</h2>
<text>YOUR TEXT</text><br />
<br />
</div>
</div>
</div>

 Paste code tadi kat bahagian sideber korang
 Preview & save.

hijau : url image
biru : title
merah : text


2 comments:

Aisha Fauzi said...

Atin, kalau nak nak kurangkan width gambar tu kena adjust code apa eh ? Hehe pening *_*

Atin Tory said...

@Aisha Fauzi : cari code box img..