CSS Hover Popup with Fade-in and -out - css

Question

I want to implement a CSS-only popup for an image, which should be displayed when the user hovers with the mouse over that image. After reading here, for example in this thread, I came up with this solution:
a.tooltip span {
width: 250px;
border: #000 1px solid;
background: #F8F8F8;
display: none;
padding: 10px;
z-index: 1000000;
opacity: 0;
transition: 750ms all;
}
a.tooltip:hover span {
display: inline;
position: absolute;
top: 10px;
left: 25px;
outline: none;
text-decoration: none;
font-size: 70%;
color: #000;
opacity: 1;
}
However, this solution does not make the popup fade-in, it simply pops up without any delay. Also, I want the popup to fade-out when when user moves away the mouse cursor again.
Any ideas what I am doing wrong, or what I should rather try instead?
PS: This is how I call the code:
<a href="#" class="tooltip">
<img src="questionmark.png" />
<span>Tooltip Text.</span>
</a>

Answer 1

You can't add a transition to an element with display:none; you must do it like this:
a.tooltip span {
position: absolute;
top: 10px;
left: 25px;
width: 250px;
border: #000 1px solid;
background: #F8F8F8;
padding: 10px;
z-index: 1000000;
display: inline;
opacity: 0;
transition: 750ms all;
}
a.tooltip:hover span {
outline: none;
text-decoration: none;
font-size: 70%;
color: #000;
opacity: 1;
}
Just use opacity, that's transition-able. Live example: https://jsfiddle.net/wbpbcyfz/1/