SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling background images with jquery

    Hi,

    I wonder if anyone can help. Is it possible to have a background image change on hover using jquery and also have a fade in effect?
    I have been able to do this with images, but now when they are background images on a div.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You would need to do the following in order to achieve this:

    1. You would need to fade out the element your changing the background image on and once faded out change the background image URL to the new image
    2. Once the URL has been changed simply fade the element back in then rense and repeat for any other images you have

    NOTE: To avoid the element collapsing to height: 0 you should wrap a DIV around the child element with a set height and width so that you can change the background on the child element.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply. I have managed to get it working. Your explanation helped me see the problem from a different angle. I took the approach you suggested, but as the original and 'hover' images were the same but for their transparency I was able to simplify it even further. Thanks again, I have been staring at this problem for days and was getting nowhere


Bookmarks

Posting Permissions

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