This is how Katie did it!~ (From her F2U CSS)

/*Free to use CSS template by Katie (#106445).
This code may be altered, edited, or re-uploaded.
This template may be used to create paid codes (pre-mades and commissions).
Please do NOT remove this credit, unless your coding becomes unrecognizable from this one!*/

.smallhoverbox {
position: fixed;
left: 0;
bottom: 0;
background: rgba(13, 13, 13, 0.6);
color: #D6D9C1;
padding: 10px;
border: none;
border-radius: 10px 10px 10px 10px;
margin: 10px;
height: 50px;
width: 18%;
overflow: auto;
transition: 2s
}

.smallhoverbox:hover {
height: 600px;
width: 20%;
}-------------------------------
Some explanation:

- position:fixed; means that the position will be locked to whatever parameters left: and bottom: are set to.

- left: and bottom: are currently set to have the box appear at the bottom left of the screen.

- padding: 10px; adds a slight padding to the inside of the box. It ensures that none of the images or text will be absolutely flush with the borders of the box, making it neater and more legible.

- border & border-radius: are both optional here. Change them 'til your heart's content!

- margin: 10px; adds a type of "padding" or blank space around the outside of your box. It's recommended to keep for neatness, and showing that the box fits "within" your den css.

- height: & width: are specified sizes of your box. The first set of height/width is what the box appears when at rest and isn't being hovered over. .smallhoverbox:hover controls what the box changes to once a mouse is over it.

- overflow: auto; controls where the extra content goes that doesn't fit within the specified height/width. In this case, we want it to be hidden but we ALSO want to be able to scroll through it when we want to. Having it set to auto ensures it's hidden, but the ugly scrollbars aren't visible until necessary. Yay!

- transition: 2s controls the amount of time it takes for the full box to appear and collapse.