I N F I N I T E: Image Hover

Assalamualaikum :)

Tutorial nie arrien pernah buat dah,but untuk blogskin. Tapi ada pengguna template designer tanya arrien macam mana nak buat tuto nie kalau guna template. Untuk pengguna blogskin yang taktahu kewujudan tuto nie,boleh rujuk SINI hehe :D So here the tutorial :)

1. Dashboard > Layout > Add a Gadget > HTML/JavaScript.

2. Copy code ini.

<style>
#kim{
background:#f0eeeb;
color:#000;
width:230px;
height:180px;
margin-top:-185px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out; }
#kim:hover{opacity:.7}
</style>
<div style="text-align: center;">
<center><img height="180" src="URL IMAGE" width="230" /><br />
<div id="kim"><br />
YOUR WORD</div><br /></center></div>

3. Paste dalam kotak HTML/JavaScript tadi.
4. Save! Done :)

Note :
Merah : Url image
Biru : Ayat korang

No Comments

| Live Preview |

Assalamualaikum :)

Sebenarnya img hover nie tak tahu nama apa,so just bagi title berpusing coz kalau korang tengok live preview tu and gerakkan cursor ke gambar,gambar tu akan akan jadi lebih kurang orang kata berpusing,kan?? haha that why lah :D

Template designer :
1. Paste code sebelum code ]]></b:skin>

Blogskins/ Classic template :
1. Paste code sebelum code </style>

img{
border:1px solid #f8f8f8;
padding:3px;
-webkit-transition: 3.5s;
}
img:hover {
-webkit-transform: rotatey(180deg);
}

2. Preview & save ^_-

No Comments

| LIVE PREVIEW |

Assalamualaikum :)

Dont re-tuto or re-post !

Oke code nie arrien ambil dari tumblr arrien so plez dont re-post and re-tuto oke! XD

Template Designer

1. Paste code sebelum code ]]></b:skin>

Blogskins/ Classic template :

1. Paste code sebelum code </style>

img{
opacity:.7;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
img:hover{
opacity:1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

Preview and save!