CSS Transition on Hover - html

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 display another div at the top of it, however it should be transitioned, so the hover effect would be smoother.
How is it possible, if I have these two divs?
<div id="first">
<div id="on-hover">
<img src="example-image.png" />
</div>
</div>

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.

Answer 2

#on-hover {
opacity: 0;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}
#first:hover #on-hover {
opacity: 1;
}
This is only about the animation. A more detailed example here: http://jsfiddle.net/ELa6X/

Answer 3

i quickly mocked up something that could do it with css3 transitions demo jsfiddle
#on-hover {
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
opacity:0;
}

Answer 4

By smoother do you mean fade in? Here is an example of fading in on #on-hover. I use pointer-events:none to ignore hover on <img> and pass the event on to its parent #on-hover.
jsFiddle
#first,
#on-hover {
width:100px;
height:100px;
}
#first {
background-color:#F00;
}
#on-hover {
opacity:0;
background-color:#0F0;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
#on-hover:hover {
opacity:1;
}
#on-hover img {
pointer-events:none;
}

Answer 5

Use the pseudo selector :hover.
#first:hover > #on-hover{
opacity:1;
}
#on-hover{
opacity:0;
-webkit-transition: opacity 0.5s;
}
#first{
width:300px;
height:200px;
}
http://jsfiddle.net/charlescarver/V8PK3/1/

Answer 6

I'd suggest using jQuery and animate(). You could do with CSS but then you'd have problems with older browsers.