Friday 19 July 2013

Hover Image Got Something vers 2


Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style>#sidebar-position{border:1px dashed pink;z-index:9999;background:url(http://i.imgur.com/uQKYr.png);padding:5px;width:410px}
#back{-webkit-transition: 1.0s;-moz-transition: 1.0s;border:4px solid #fff;background-image: url('Url Image'); 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>
    Adjust code :
- Pink : jenis border.
- Biru : kode warna border
- Merah : Url Image.
- Oranye : judul hover image.
- Ungu : Isi hover image.

2 comments:

 
Copyright © 2013-2017 By Anugerah Mullia Ulfa Salsabella. All Rights Reserved.