Fade to different div background image on hover

Question

For this new website I'm creating, I'm trying to get one background to fade into another when I hover on a link. I don't want the link to change, just the background. I found some good jQuery to get the background to change, but there's no fade effect and my knowledge of jQuery is limited. Here's what I have so far:

Html

<div id="container">
        <a id="linktomouseover" href="http://delusion.submittable.com/submit" alt="Submit to Delusion" style="position: absolute; width: 275px; height: 99px; top: 354px; left: 263px; display: block;"> </a>
    </div>

Css

#container {
  position:relative;
  height:600px;
  width:800px;
  margin:0 auto;
  background: url(Images/website-header1.png) center top no-repeat;
  border: 1px solid #ffffff;
}

JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script>
        $(function() {
             $("#container a").hover(function() { // Changes the #main divs background to the rel property of the link that was hovered over.
             $("#container").css("background", "url(Images/website-header2.png)");
         }, function() { // Sets the background back to the default on hover out
             $("#container").css("background", "url(Images/website-header1.png)");
             });
        });
</script>

If anyone has any other suggestions on how to do this, that would be great. This is just what I found. Thank you so much for helping!

To fade two images at the same time, you would need two images, or in your case two elements with different backgrounds and then fade in/out the elements, as you can't fade just the background property. To fade out, swap images, and then fade in, one element will suffice. — adeneo, Dec 17 '12 at 19:00
Take a look at this answer: http://stackoverflow.com/questions/6948758/css-fade-between-background-images-on-hover — Mike Lucid, Dec 17 '12 at 19:07
One of the images is a black background with white text. That's the background property. I'd like to fade in an image on top of the background, which has a misty quality about it. The background image I have currently doesn't really need to go away or cross fade. The other image just needs to fade in when I hover over the link, which is on top of the image. — Echo Martin, Dec 17 '12 at 19:10

Grinn · Answer 1 · 2012-12-17T19:57:23.123

Here's how to do it without ever hiding the link. It also does a nice cross-fade instead of fading out completely, then back in.

Have two div's within #container that are absolutely positioned with 100% width and height, and a z-index of -1. Each of these divs contain your background images. You swap them out on hover. In my example I use a background color instead, for expedience sake, but you get the idea.

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <a href="#">The Link</a>
</div>

...

#container {
    margin: 100px;
    position: relative;
}

#container a {
    color: white;
}

#container div {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#one {
    background-color: blue;
}

#two {
    background-color: green;
    display:none;
}

...

$("#container a").hover(function () {
    $("#container div:visible").fadeOut();
    $("#container div:hidden").fadeIn();
});

Here's the fiddle

Fade to different div background image on hover

1 Answers1