GirlwithBigHead

Tutorial : Hover Image Got Something Behind Image (iv)

13/07/2013 | 1 comments

Assalamualaikum! Credit jika awak menggunakan tuto ini dan no-repost !

Preview :

Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>

#back{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border:4px solid #fff;
background-image: url('http://data.whicdn.com/images/41890143/tumblr_mcvaffUv5u1qb0d07o2_500_large.gif'); width:400px;
height:180px;
overflow:hidden;
margin-right:6px;
margin-bottom:5px;}

#back:hover{
border:4px solid pink;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

.titu {
margin-right:-90px;
margin-top:-60px;
font:28px 'tabitha';
padding:5px;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;transition:all .3s linear;
text-align:center;
color:#fff;
background:pink;
padding:3px;
letter-spacing:3px;}

@font-face{font-family:tabitha;src:url('http://static.tumblr.com/eq1rpir/YvSm6kvcd/tabitha.ttf')}

#statuss {
margin-top:200px;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
transition:all .3s linear;
font:8px 'tinytots';
text-transform:uppercase;
color:#000;
padding:3px;
background:#fff;
display:block;
height:250px;}

#back:hover .titu {margin-top:0px}

#back:hover #statuss {margin-top:0px;}

@font-face {font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}

</style><div id="sidebar-position">

<center>
<div id="back">
<div class="titu">
My Life Status</div>
<div id="statuss">
<div id="status">
<br/><br/><br/><br/><br/><br/>
You may put anything at here, such as status, cbox, twitter or bla bla bla.
</div>
</div>
</div>
</div>

OLDER NEWER