Posted by Coding Help

Lumiere (#86771)

Heavenly
View Forum Posts


Posted on
2018-02-17 10:46:28
I've seen this around on a few profiles - anybody know how to make the expanding boxes (they expand when you hover with your cursor)? I've heard them called "doomboxes" but I'm not sure. I'm currently trying to learn html/css.

Examples

Shu's Profile



Hrt Icon 0 players like this post! Like?

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2018-02-17 15:41:25
Hiya!

Here's the code you'll need for expanding div boxes!

CSS:
.name {
height: #px;
padding: #px;
overflow: hidden;
margin-bottom: 10px;
transition: height #s;
}

.name:hover {
height: #px;
overflow: auto;
}

HTML:
<*div style="width:#px;background:#HEXCODE;border:#px solid;"* class="name"*>Text<*/*div>

You can change out name for just about anything your heart desires as long as both the CSS and HTML names match. Also, be sure to replace any #'s with numbers, replace any #HEXCODE with a color code and remove any *'s from the HTML code.

I hope it helps!



Hrt Icon 0 players like this post! Like?

Lumiere (#86771)

Heavenly
View Forum Posts


Posted on
2018-02-17 15:59:52
Thank you so much! c: This was really helpful.



Hrt Icon 0 players like this post! Like?

Keina [Not Active] (#50109)

Lone Wanderer
View Forum Posts


Posted on
2018-02-17 16:03:38
No problem! :)



Hrt Icon 0 players like this post! Like?







Memory Used: 620.58 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00375s