Question

How would you / or is it possible to create an animation in css3 after the object in question has lost focus?

Example:
You Hover over a picture and a box appears above the picture slides into view like-so:

.product_title {
    border:5px solid black; 
    width:0px; 
    height:0px; 
    background-color:#deddcd; 
    /* margin:-130px 0 0 200px; */
    position:relative;
    z-index: 10;
    border-radius: 10px;
    opacity: 0.9;
}
.product_wrap:hover .product_title {
    width:154px; 
    height:164px;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    overflow: visible;
    position: absolute;

Now what I want to do is “after” I move the mouse from the current object onto the next this activates the object I have just “lost focus” with to do transition-duration as well. That way the box that appeared smoothly in 0.8s will disappear smoothly in 0.8s instead of instantaneously.

Is it possible to do this with CSS3?

Answer 1

Just add

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;

to .product_title as well.

See: http://jsfiddle.net/pcJQ5/