[Help] Webpage, expandable "box" on hover?

[Alladaskill17]

See: https://www.molten-wow.com/ for what I am talking about, along with screenshot:

->

[pack34]

You could always use javascript and change the display css property for the box when you hover over it

[Alladaskill17]

You could always use javascript and change the display css property for the box when you hover over it

I know very little, and definitely have no knowledge of javascript and limited CSS, think you could provide an example? I am trying to sift through their code to understand how it works, failing.

[primexx]

very easy with CSS, here's the pseudo-code (two alternatives)

#1: parent is shown, child is what shows up on hover (works with any element, including lists)


<parent>
<child></child>
</parent>


child {
 display:none; #hides it by default
}

parent:hover child {
 display:block; #display child when parent is hovered
}

# you can add animation with css 3 transitions, google it
[/CODE]

[CODE]
#2: expand a single element

<element></element>

element {
height:100px; # some arbitrary property
overflow:hidden; # possibly hide the overflow, which will allow you to put more content in the element than the collapsed form can fit, and will show up when the element expands on hover
}

element:hover {
height:200px; # a new value for that property when you hover on it
}

# you can add animation same as above.
[/CODE]

[Alladaskill17]

very easy with CSS, here's the pseudo-code (two alternatives)

#1: parent is shown, child is what shows up on hover (works with any element, including lists)


<parent>
<child></child>
</parent>


child {
display:none; #hides it by default
}

parent:hover child {
display:block; #display child when parent is hovered
}

# you can add animation with css 3 transitions, google it
[/CODE]

[CODE]
#2: expand a single element

<element></element>

element {
height:100px; # some arbitrary property
overflow:hidden; # possibly hide the overflow, which will allow you to put more content in the element than the collapsed form can fit, and will show up when the element expands on hover
}

element:hover {
height:200px; # a new value for that property when you hover on it
}

# you can add animation same as above.
[/CODE]

Wow, see this (I think) is what I am looking for, however, where do I place this? Header or body? or different parts in different spots? I am very unskilled, and apologize if I come across as stupid!? :/ Could I get actual, non pseudo-code or would this work plugged into the proper spots?

[primexx]

the stuff with < and > is the html which represents your actual box, i included it to show you how it relates to the CSS styles, which is what the rest of it is. that goes with all the other CSS styles you have.

[Alladaskill17]

BUMP, re-interested in doing this for personal use, I really just want my own little webpage and these boxes with that sort of functionality is the only thing I need before I even bother with everything else. Can anyone just please code it for me (working just like their webpage)? It would be so greatly appreciated. Been working with the pseudocodes previously posted and I know, I know, it probably is simple but I cannot get it:

- I do not know where to place the code

+ Header?

+ within CSS?

+ within body?

- is there java/jquery? (difference?)

- html5?

Basically if you can replicate exactly what theirs is, where all I have to do is place it in a 'div'(?) and move it where I want it, replacing your sample text with mine that would be fantastic - clearly no rush as this is strictly personal use and the topics 4 months old haha

[haz-gb]

BUMP, re-interested in doing this for personal use, I really just want my own little webpage and these boxes with that sort of functionality is the only thing I need before I even bother with everything else. Can anyone just please code it for me (working just like their webpage)? It would be so greatly appreciated. Been working with the pseudocodes previously posted and I know, I know, it probably is simple but I cannot get it:

- I do not know where to place the code

+ Header?

+ within CSS?

+ within body?

- is there java/jquery? (difference?)

- html5?

Basically if you can replicate exactly what theirs is, where all I have to do is place it in a 'div'(?) and move it where I want it, replacing your sample text with mine that would be fantastic - clearly no rush as this is strictly personal use and the topics 4 months old haha

He's given you some CSS. Place the CSS inside this (which goes in the <head>):

<style type="text/css">
// PUT IN HERE
</style>
[/CODE]

Now are you using a single element? If so use the second method. It cuts the height of the element short and hides whatever overflows. When the element is hovered over it is expanded to its full height.

Replace where he said 'element' witch your selector. E.g. if it's a div with an id of banana:

[CODE]#banana[/CODE]

but if it is a div with a class of apple:

[CODE].apple[/CODE]

The first method works by completely hiding the child but showing it when the parent element is hovered over. To be honest this will involve some unnecessary markup. I would use something similar but with a definition list and expanding the description when the title is hovered over. This would require some sibling selectors or even javascript. But this seems above your level so stick with method #2.