Owner
안녕하세요! ♡ αQι'lαн | 18тαнuη | kL ♡ яαмα2 тιdαк тαнυ вєтαpα ιη∂αнηyα ωαяηα ѕαyαpηуα,αkαη тєтαpι мαηυѕια lєвιh тαнυ вєтαpα ιη∂αнηуα.. Kpoppers Exotics ,Inspirit , Melody ,C-Clown dll.. Credits
Thank you
Basecode by Yasmin. Help by S U J U. Tutorial : Image Hover Part 5 Friday, November 16, 2012 - Permalink - 0 Comments
Assalamualaikum..
Tutor ni kiela nak tunjukkan cara
untuk buat image hover yang akan berpusing/terbalik apabila dihalakan
cursor..
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>6. Paste dekat bahagian yang korang nak. Contohnya dekat sidebar. 7. Preview & save oren : warna background hijau : ayat korang pink : URL image/gambar |
<div id="card-container"><div id="card"><div class="back"><center>6. Paste dekat bahagian yang korang nak. Contohnya dekat sidebar.
<br/><br/><br/><br/>AYATKORG<br/></div>
<div class="front"><img src="URLIMG"></div></div></div>