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: 
You can use CSS's `:hover` pseudo-class, unless you need to support IE6:

```
.image-hover:hover {
    opacity: .8;
}

* html .image-hover:hover { /* For IE7 and higher */
    filter: alpha(opacity=80);
}

```

That won't *fade* to 80%, though, it'll just go there immediately. To do that, you can use jQuery's [`hover`](http://api.jquery.com/hover) and [`animate`](http://api.jquery.com/animate) functions (*edit*: or [`fadeTo`](http://api.jquery.com/fadeTo/), which is just a convenience wrapper for `animate` on `opacity` as shown below):

```
$(".image-hover").hover(
    function() {
        $(this).stop().animate({opacity: "0.8"});
    },
    function() {
        $(this).stop().animate({opacity: "1"});
    }
);

```

It's not clear from your question what the text in the span is supposed to be doing, but those are the tools to get you started.

[Here's an updated version of your fiddle](http://jsfiddle.net/2RN6E/10/) showing the animation; I've used 0.6 rather than 0.8 just so it's more obvious.
This code retains the block display for the description element: <http://jsfiddle.net/2RN6E/11/>

It just uses the animate function of jQuery:

```
$(".image-hover").hover(function() {
    $(".desc").animate({opacity: '0.75'},'slow');
}, function() {
    $(".desc").animate({opacity: '0'},'slow');   
});

```