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: 
So... here's the CSS3 / HTML5-way to do this. This won't work in IE though: it will fall back on the regular, immediate way (so it does work, it just isn't as smooth as it is in the real browsers).

```
div.yourDiv {
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

div.yourDiv:hover {
    opacity: 0.8;
}

```

Since CSS3-transitions are using hardware-accerelation, this really is very smooth! Besides that, you don't even need any Javascript or jQuery for this =)!
```
.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/>
 );