[SOLVED] How to fade out after hover is done using CSS

How to fade out after hover is done using CSS

So the hashtags in my tumblr theme shows when hover.
the hashtags fade in and show when hover, but as soon as the courser moves out of the region it changes back without any effect. How can I have an effect for to fade out the hashtags?

 .posts:hover .tags {
opacity:1;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

Solution

The problem is that transition-duration is applied to element when :hover is applied which makes the fade out not work. so move transition-duration to .tags like below

/* default CSS; when :hover is not triggered */
.posts .tags {
    opacity:0;
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
}
/* When :hover is triggered */
.posts:hover .tags {
    opacity:1;
}