Tutorial : Image Hover Part 5 (Blogskin)

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