Tutorial : Image Hover Part 5 (Blogskin)

Tumblr_m8jyeiwrp11qmm8wlo1_500_large

Assalamualaikum and annyeonghaseyo. Tutor ni tieqa nak tunjukkan cara untuk buat image hover yang akan berpusing/terbalik apabila dihalakan cursor. Actually, tak tahu nak explain macam mana. Korang tengok contoh dekat bawah ni



1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Kemudian, copy code dekat bawah ni

#card {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 100px;
height: 100px;
position: relative;
margin:0px;
}   

.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s ease-in;
width: 100%;
height: 100%; 
font-family:verdana;
color: #000;  
font-size:8px; 
}

.back {
-webkit-transform: rotateY(180deg);
background: #000000;
overflow: hidden;
}   

.front {
}

#card-container {
display: inline-block;
text-align: justify;
}   

#card-container:hover .back {   
-webkit-transform: rotateY(0deg);
}

#card-container:hover .front {      
-webkit-transform: rotateY(-180deg);
}

4. Paste di atas code tadi
5. Now, copy code ni pulak
<div id="card-container"><div id="card"><div class="back"><center>
<br/><br/><br/><br/>AYATKORG<br/></div>
<div class="front"><img src="URLIMG"></div></div></div>
6. Paste dekat bahagian yang korang nak. Contohnya dekat sidebar.
7. Preview & save

oren : warna background
hijau : ayat korang
pink : URL image/gambar
Posted by at 7:51 AM

2 comment [s]:

Unknown said...

akak,kalau kite nak buat kat disclaimer??bile org halekan cursor kat gambar di disclaimer,nanti ade la kluar word yg kite tulis tu??blas kat shoutbox saye ye kak.tq.sori susahkan

September 14, 2012 at 5:07 PM [REPLY]
Unknown said...

akak,sya try letk bwah disclaimer.tp tak jadi ape2 pon..plisss..blas kat shoutbox saye ye kak.tq kak1:D

September 15, 2012 at 8:46 PM [REPLY]

Post a Comment