Question: Hi I currently have span that displays over an image on hover, however I want to use a bit of javascript or css transitions to make this div fade in to about 0.8 opacity on hover then back to 0 when the mouse is not hovering.

Here is an example of how I have it setup so far, now all thats needed is the fade and 0.8 opacity:

[How its setup - Jsfiddle](http://jsfiddle.net/Christophe/2RN6E/4/)

Im sure there is a simple bit of code that someone has to do this

Help is much appreciated thanks!

Answer: 
```
.classa
{
opacity:0.8;
}

```

you can `addClass` and `removeClass` like

```
$("div.image-hover").hover(
function(){
//fadein
$(this).addClass("classa");
},
function(){
//fadeout
    $(this).removeClass("classa");
}
);

```

here is the fiddle <http://jsfiddle.net/2RN6E/8/>

**EDITED after the comment below**

you can use [**`fadeTo`**](http://api.jquery.com/fadeTo/) 

```
$("div.image-hover").hover(
function(){
//fadein
$(this).fadeTo( "2000", "0.8");
},
function(){
//fadeout
    $(this).fadeTo( "2000","1");
}

```

here is the fiddle <http://jsfiddle.net/2RN6E/14/>
 );
You could do:

```
function fadein() {
    $('.desc').animate({
        opacity: 0.8,

    }, 1000, function() {
        // Animation complete.
    })

}

function fadeout() {
    $('.desc').animate({
        opacity: 0,

    }, 1000, function() {
        // Animation complete.
    })

}

$('.image-hover').hover(fadein, fadeout);

```

fiddle here: <http://jsfiddle.net/nicolapeluchetti/2RN6E/9/>