Hover over image to fade in/out separate text

[nzhardcore]

Anyone know how to do this?

Will have 4 screenshots to the left in a square formation (2 by 2), and a header and text list to the right of them. I would like the header and text list to change (fade in/out) dependant on what screenshot is being hovered over.

Have spent hours looking and can't find anything to suit or anyone who has asked this before!

Any help much appreciated, cheers.

[nap0leon]

Super easy with jQuery's "fadeToggle".

http://www.jasondahlin.com/2011/codi...ng-effects.asp

In the example above, the sideBard initially appears and the fadeToggle makes it disappear then reappear. For you, you would have 4 elements (the headline and text) which would all initially, be hidden, using "display:none". Create an "on hover" (or use mouseover if you want the quote to stay 'appeared') that 1) hides any of the other 3 elements that are displayed, and 2) shows the element containing the headline and text for the image that is being hovered on.

[donatello]

Anyone know how to do this?

Will have 4 screenshots to the left in a square formation (2 by 2), and a header and text list to the right of them. I would like the header and text list to change (fade in/out) dependant on what screenshot is being hovered over.

Have spent hours looking and can't find anything to suit or anyone who has asked this before!

Any help much appreciated, cheers.

I wrote this for my buttons, you can use CSS sprites for images which will go to Black&White or Color and a text box will change the description. You can just add a little fade script for the text on hover and you have it.

http://jsfiddle.net/hxzRq/1/