0
Hello :)

I'm having a problem with my blog theme :( 
Here is my blog: http://shiwa-hime.tumblr.com/ and I what that tiny box called 'Cute Shops' to go up when I hover it. 
What do I have to add/remove in order to go up and not down? 
Here is the code of the entire theme: http://pastebin.com/XgMC5vyg

#tab5 {
background-color:#ffffff; /* background colour */
border-bottom:1px solid #ffbeca; /* top border width and colour */
border-top:1px solid #ffbeca; /* top border width and colour */
border-left:1px solid #ffbeca; /* left border width and colour */
border-right:1px solid #ffbeca; /* right border width and colour */
width:170px; /* width before hovering */
height:25px; /* height before hovering */
font-size:13px; /* font size */
font-family: 'century gothic'; /* font */
color: #deceb1; 
position:fixed;
overflow:hidden;
top:490px;
left:78px;
z-index:999999999;
padding:2px;
overflow: hidden;
border-radius:5px;
border-top-left-radius:10px;
border-top-right-radius:10px;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;}


#tab5:hover{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-transition: 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
 padding:5px;
 height:150px;
 width:170px;
 z-index:999999999;
   overflow: scroll;
 opacity:2.0;
}


<div id="tab5"><center>
<div id="tab5icon"><div style="background-image:url(https://24.media.tumblr.com/f7242860b987cc91fbfd81ffcfcf26f4/tumblr_n2uvasHCLL1qf6u7uo1_250.png); color:#fff; font-size: 30px; text-transform:normal; font-family: 'grand hotel'; text-shadow: -2px 0 #ffc0cb, 0 1px #ffc0cb, 2px 0 #ffc0cb, 0 -2px #ffc0cb;  Border:1px dotted #fcb0cb; padding:5px; ">Cute Shops</div></div><br>
<a href="http://www.spreepicky.com/sorynella_94/2"><img src="http://www.spreepicky.com/wp-content/uploads/2014/11/best-seller-in-flash-sale3-1024x532.jpg" width="140" height="100" /></a><br>
~Go to the shop by clicking this picture and you will get 5% off your order.
~Use the code 'new face' to get 10% off your order.
~If your order is at least 15$ you get free shipping!<br>

</div>
3
Contributors
2
Replies
36
Views
2 Years
Discussion Span
Last Post by tdrosiadis
1

What do I have to add/remove in order to go up and not down?

What do you want to happen when you hover over, then what do you want to happen when you are no longer hovering?

Votes + Comments
All i want is to go up when I hover it. sukrina.tumblr.com this blog has the same box on the bottom.
1

In order to make your tab5 div unfold upwards you have to have it fixed in the bottom of the page (bottom:0;) instead of your "top:490;" This way the div will unfold the way you want.
If by some other way you manage to unfold upwards the tab5 div in the position that is now it will mess with the above section and that is something that you don't want.

Edited by tdrosiadis: misspelling

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.