wow such great title

Hi! I'm very new to this css coding profiles thing, and I'm coding the profile of my pet Groblen. Right now the stats are just floating there, but I wanted to put it in a "hover section", like the pet image in this profile. Can I do it? And how? Any help is very appreciated. ;A;

You mean like this? like a dropdown?

yes, exactly! thank you so much ;u;

Ok, I hope I can explain it properly, sorry if something might not be right, it's late here and english is not my first language :)

As you already started to code, you want to modify the pet_stats section. I coded further and added those elements, that will place your section at the top of the page { position:absolute; top:0px; left:1037px; height: 0px; width: 200px; margin: 0px; padding: 0px; color: white; background-color: ; overflow: hidden; border-bottom: 10px solid ; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 1px 1px 1px 1px ; -webkit-transition: all 3s ease; transition: all 3s ease;}

left:0px will grant the position at the top margin and padding will make the position of the inner dropdown at the top, too to have some rounded corners, like a few elements in the profile, we can add the border-bottom-radius to cut the edges into some soft rounded corners :) the box-shadow will give the dropdown a nice glowing effect, like in the whole profile! now comes the interesting part, to make the effect look smooth and flawless, the transition. all 3s ease says, that the whole effect lasts 3 seconds, having a slow start getting quicker and ending slow again. the webkit part is used to trigger browers that are coded in webkit. you can also add -moz-transition and -o-transition fpr mozilla and opera browers :) to activate the whole coding, you have to add the second half of the code, the hover-coding-part

:hover { height: 320px; padding: 10px;}

as we defined the height of that part to 0, we want it to enlarge it to a height of 320 pc to show everything, giving it a nice space to all sites (padding:10px)

I hope you were able to understand my explainings :D

Damn, this code thing is genius! Thank you very much for your help and for teaching me, you explained very well and it looks fancy as hell :P

you are welcome :) you can slide the stats where you want to have, just shove it to the top and didnt changed the left-part at all ^^ feel free to ask, if you have any questions - as long as I can help ofc :P

ps I also recommend to change the html part html {background:url(http://orig09.deviantart.net/80f6/f/2017/045/b/e/1_by_jndfjfsd8934-daz43bt.png) left top repeat ; overflow:hidden} from where it says repeat to no-repeat. the bigger the screen solution is, the more of the repeated background is visible :) so atm I can see data-files twice ^^

ah yes, usually I use pattern backgrounds so I just copied and pasted the code :v thanks!