I'm looking to fade from one background image to another using a standard .hover link.
An example of the link without the fade can be seen here: http://www.makestudio.co.uk/sites/seven/
Other pages within the site will use similar layout only different background images for the links. Any help would be amazing.
Don't need jquery, just css
<div id="thisdiv">Content</div>
CSS...
#thisdiv { height: 200px;
width: 200px;
background-color: #600;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s; }
#thisdiv:hover {
background-color: #006;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;}
With an image you can use CSS for opacity to fade the image then brighten it up on hover. You can't really fade between images without jquery though.
you may use jQuery to just fade in. Otherwise, if u insist CSS, you may find this some what helpful.
<!-- HTML-->
<div id="id1" class="item"><a href="#">DIV1</a></div>
<div id="id2" class="item"><a href="#">DIV2</a></div>
<div id="id3" class="item"><a href="#">DIV3</a></div>
<div id="rightDiv">
<a id="id1match" class="region"> </a>
<a id="id2match" class="region"> </a>
<a id="id3match" class="region"> </a>
<div id="fakeDiv1" class="fake"><a href="#">DIV1</a></div>
<div id="fakeDiv2" class="fake"><a href="#">DIV2</a></div>
<div id="fakeDiv3" class="fake"><a href="#">DIV3</a></div>
</div>
<!--CSS -->
/* style of left side */
You can't really fade images with CSS.
If you want to try something, though, you can use -webkit-animate and other browser-specific prefixes to animate the opacity of the element itself. You'll need to tinker with it.
Google CSS3 animations for more information. You want to animate the opacity property.
Hover on any element won't work on old browsers, so you need to be sure your client base either doesn't use old browsers, or you degrade gracefully.
I'd suggest using Modernizr. Its a js library that will help you have cool effects for up to date browsers while degrading well for ones that don't support your particular feature.
