dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Hover over image to fade in/out separate text

  1. #1
    Join Date
    Feb 2012
    Posts
    3

    Exclamation Hover over image to fade in/out separate text

    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.

  2. #2
    Join Date
    Nov 2007
    Posts
    432
    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.

  3. #3
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    Quote Originally Posted by nzhardcore View Post
    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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles