HTML Problem

[Sorina_1]

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>

[JorgeM]

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?

[tdrosiadis]

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.