hlforr — 2012-01-02T06:25:00-05:00 — #1
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.
chris_upjohn — 2012-01-02T07:05:57-05:00 — #2
You would need to do the following in order to achieve this:
- 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
- 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.
hlforr — 2012-01-02T17:05:36-05:00 — #3
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