Get Content On Hover

Hello,
I want to content to appear on my box when it is hovered on
for example this box one: Page

and when its hovered different content appears from the top
with text and with a different background color. I would need
script and another div to achieve this correct?

Example on hover boxes something like what they have on
this website: http://www.cadentalgroup.com/

Hi,

You can do this with CSS only if this is a follow on from your other thread.

Yes it is.

What about in general would it be the same approach?
That is CSS3 you are using right?

Right, you can do this with script in the javascript file or in page and the div tag in the page. Through the script you can change the content of the div tag with mouse actions.

If this is just a hover effect then css is fine unless you were deleivering dynamic content then js would be the way.

The transform/animation is css3 but you could do this without animation back to ie6 if you used positioning instead of translate (older browsers would just hide and show immediately and newer browsers would animate). However translate makes for smoother animations and as you are already using css3 for the gradient and cut out it seemed the right choice.

Please offer specific advice rather than vague generalisations otherwise the post looks very much like spam.

1 Like

You can define a div tag with id in the page and a mouseOver function and a mouseOut function in the js, in the two functions you can set the values for div.innerText and div.backgroundColor and the values are different in each function.

Can we see an example?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.