Sunday, July 22, 2012

Tutorial : Image Hover Text (Blogskin)

622166228_large
Hye annyeong . Ehh pantang nampak idea nak buat tuto huhu --' . Memang ni jelah keje atin >< hihi . Ok kali ni atin nak ajar korang semua cara buat image hover with text . Entahlah atin pun main hentam tulis macam ni , bila cursor korang pegi kat image tu nanti hover ia keluar text korang . Hmm tak paham lagi? Adoi susah . Xpe atin ajar korang ye bagi contoh bawah ni:



Dah nampak? Ok sekarang atin ajar korang . Yang ni hanya untuk blogskin je ok . Atin tak tau kalau design punya  code nye macam mana --'


 Dashboard > Template > Edit HTML
 Tekan ctrl + f (serentak) dan cari code </style>
 Copy code bawah ni:
#atin{
background:#fff;
padding:2px;
width:220px;
height:220px;
margin-top:-100px;
margin-left:1px;
opacity:.01;
-webkit-transition:all .5s ease-in-out
}
#atin:hover{opacity:.8}
 Paste code tadi di atas </style>
 Next , copy code yang bawah ni pula
<img style="border:1px solid #eee" width="220" src="URL IMAGE"/>
<div id="atin"><br>
<center>PUT YOUR TEXT</center>
</div><br>
 Paste code tadi kat bahagian sideber korang
 Preview & save.


merah : URL image korang
biru : Text apa yang korang nak tulis
hijau : pastikan sama 

4 comments:

Narumi Haruka said...

thanks ! dah lama dah cari Tutorial ni ^^

Atin Tory said...

@Narumi : jijja? ok ^^ ur welcoem ^^

intan huwaina said...

thanks..saye guna yup (:

Nurul Anisah said...

Thanks for the tutorial :)