Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* BOX 1 */
- #box {
- position:fixed;
- top:30px; /* distance from top*/
- left:30px; /* distance from left*/
- border:1px solid #000000; /* border colour*/
- width:4px; /* box width*/
- height:4px; /* box height*/
- padding:2px;
- z-index:9999999; /* every box you add take off a nine from here */
- -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
- }
- #box:hover {
- height:150px; /* content box height */
- width:85px; /* content box width */
- background:#fff;
- }
- #box:hover #cont {
- opacity:1;
- /* keep these same as above but take off 5 px from width */
- width:80px;
- height:150px;
- }
- #cont {
- position:fixed;
- padding:2px;
- text-align:center;
- overflow:hidden;
- width:0;
- height:0;
- opacity:0;
- z-index:9;
- -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
- }
- /* BOX 2 */
- #box2 {
- position:fixed;
- top:30px;
- left:44px;
- border:1px solid #000000;
- width:4px;
- height:4px;
- padding:2px;
- z-index:999999;
- -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
- }
- #box2:hover {
- height:150px;
- width:85px;
- background:#fff;
- }
- #box2:hover #cont2 {
- opacity:1;
- width:80px;
- height:150px;
- }
- #cont2 {
- position:fixed;
- font-size:10px;
- padding:2px;
- text-align:center;
- overflow:hidden;
- width:0;
- height:0;
- opacity:0;
- z-index:9;
- -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
- }
- /* BOX 3 */
- #box3 {
- position:fixed;
- top:30px;
- left:58px;
- border:1px solid #000000;
- width:4px;
- height:4px;
- padding:2px;
- z-index:99999;
- -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
- }
- #box3:hover {
- height:150px;
- width:85px;
- background:#fff;
- }
- #box3:hover #cont3 {
- opacity:1;
- width:80px;
- height:150px;
- }
- #cont3 {
- position:fixed;
- font-size:10px;
- padding:2px;
- text-align:center;
- overflow:hidden;
- width:0;
- height:0;
- opacity:0;
- z-index:9;
- -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
- }
- <body>
- <div id="box">
- <div id="cont">
- XVIII, polish,
- <br>i like cute girls
- <br><br>i'm good at ruining lives.
- <br><br>this blog contains dicks and boobs
- </div>
- </div>
- <div id="box2">
- <div id="cont2">
- <br>Girlfriend:
- <br><a href="http://sherleg.tumblr.com//">Femke</a>
- <br><br>Fiancee:
- <br><a href="http://aconissa.tumblr.com">Ana Rosa</a>
- </div>
- </div>
- <div id="box3">
- <div id="cont3">
- <br>Network:
- <br><a href="http://thejarenenetwork.tumblr.com/">The Jarene Network</a>
- <br><br>Side Blogs:
- <br><a href="http://evilandgay.tumblr.com/">photography & art</a>
- <br><a href="http://historywithwomen.tumblr.com/">women in history</a>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement