GirlwithBigHead

Tutorial : Hover Image Got Something Behind Image

18/05/2012 | 15 comments

Assalamualaikum ! Hello ! Hai ! Bonjour !
Tutorial ni mybe takda orang buat. Tapi saya rajin, so saya nak share. Nah tahu maksud tutorial ni macam mana ? Tapi ni agak susah sikit taw. harap faham.

Preview :

put whatever yout want like cbox or profile.

p/s: use Ctrl + C for copy the codes.
p/sii: jadi tak ? kalau tak jadi sila comment.

Template Designer :
i.) Dashboard --> Design --> Page Elements --> Add a Gadget ---> Html/Javascript
ii.) Paste dekat Html/Javascript
ii.) Preview and Save !

Blogskins :
i.) Design --> Template --> Edit Html
ii.) Copy semua code dekat bawah dan paste dekat bawah </style>
iii.) Preview and Save !

<style type="text/css">
.navs {
width:100%;
height:114px;
padding-top:3px;
padding-bottom:3px;
margin-top:0px;
font-size:11px;
font-family:arial;
text-align:center;
opacity:0;color:#777;
background-color:white;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;}

.navs a {
color:white;}

.outside:hover .navs {
opacity:1;}

.outside {
float:left;
margin-right:2px;
height:120px;
width:95%;}

#outside1 {
border:5px solid #444;
background-image:url('URLIMAGE');
background-color:#555;} </style>

<div class="outside" id="outside1"><div class="navs">put whatever yout want like cbox or profile.</div></div>

OLDER NEWER