I'm trying to re-create in css3 the function of the bottom 3 image hover effects on this page just as a personal project <http://themes.grandpixels.com/muse/>

It's done in jquery on the site I guess but as far as I know that could be possible with css3 also?

Basically I want to hover over an image and have a background image gradually fade in to view instead of the first image.

Anybody got any idea how to do this? I've been stuck literally all morning.

Thanks for the help :) 

<http://jsfiddle.net/r74gw/>

```
 <body>

 <div class="nav">
<img url="http://imgur.com/vErJT32,DQWhz1e#0">
 </div>

 </body>

 #nav {
margin: 0px;
padding: 0px;
 }

    #nav img {
display: block;
margin: 0 5px;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
background: url(http://imgur.com/vErJT32,DQWhz1e#1) no-repeat center top;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;

 }

    #nav img:hover {
background: url(http://imgur.com/vErJT32,DQWhz1e#1) no-repeat center top;
background: rgba(100, 125, 175, 0);
    }

```