CSS Transition on Hover

Question

I have a problem. I actually try to do a transition at a div when I hover the mouse over an object. So basically I have a div, and when I hover my mouse the div, it should displ

Answer 1

You use CSS3 transition:

#on-hover {
    opacity:0;
    /* Firefox */
    -moz-transition-property: opacity;
    -moz-transition-duration: 2s;
    -moz-transition-delay: 1s;
    /* WebKit */
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    /* Opera */
    -o-transition-property: opacity;
    -o-transition-duration: 2s;
    -o-transition-delay: 1s;
    /* Standard */
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 1s;
}
#on-hover:hover {
    opacity:1;
}

The complete thing working: http://jsfiddle.net/djwave28/CuNkZ/2/

More information can be read here: http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/ I do need to explicitly mention that this may not work in IE9 and below. IE10 seems to work according top the docs. If needed, you can simulate the effect with javascript, but the question was CSS.