Fade in/out background image on hover

Question

Instead of transitions left to right, right to left. How can I make it to fade in fade out, no movements, just opacity fade out, fade in.

http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/

Answer 1

You can do this with the CSS3 properties opacity and transition

.yourClass
{
    opacity: 1;
    transition: all 3s ease;
} 

.yourClass:hover 
{
    opacity: 0;
}

An example here :

http://jsfiddle.net/ghBAT/

Answer 2

If you are ok with jquery - have a look at .fadeIn()

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
  });
});