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

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

Help is much appreciated thanks!

Answer 1

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 =)!