CSS3 Custom tooltip fade in and out - html

Question

I made custom tooltip, and before applying any CSS3 animation I displayed those tooltips using display: none; for hiding it, and display: inline-block; for showing tooltip. This works ok, but now I want to animate opacity of tooltip, so it have nice fade effect. But, I have problems with this, so I need your help. This is what I've tried:
.title div.tooltip{
display: inline-block;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.title:hover div.tooltip{
display: inline-block;
filter: alpha(opacity=50);
opacity: 0.5;
}
and this is markup:
<li class="title">
<div class="tooltip">
<label><em>Full title:</em> <?php echo $groups['title']; ?></label><br>
<label><em>Description:</em> <?php echo $groups['description']; ?></label><br>
</div>
</li>

Answer 1

Removing the filter: alpha(opacity=50); and adding the opacity:0; to .title div.tooltip{... worked for me.
The default for the opacity was 1, so the fade-in was going from 1 to 0.5 -- Also, I believe the filter: alpha(opacity=50) was overwriting the opacity transition completely and jumping right to opacity=50. You could also have added transitions for filter
.title:hover div.tooltip{
display: inline-block;
opacity: 0.5;
}
.title div.tooltip{
display: inline-block;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
see updated JsFiddle - includes your complete css found in comments.