CSS Hover Popup mit Fade-in und -out

Question

Ich mag einen CSS-only Popup für ein Bild implementieren, die angezeigt werden sollen, wenn der Benutzer mit der Maus über dieses Bild schwebt. Nachdem hier lesen, zum Beispiel in this thread, kam ich mit dieser Lösung:

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; 
} 

Allerdings ist diese Lösung nicht die Popup-Fade-In macht, ist es einfach, ohne jede Verzögerung erscheint. Außerdem möchte ich, dass das Popup ausgeblendet wird, wenn der Benutzer den Mauszeiger wieder wegbewegt.

Alle Ideen, was ich tue, falsch, oder was soll ich lieber stattdessen versuchen?

PS: Dies ist, wie ich den Code nennen:

<a href="#" class="tooltip"> 
    <img src="questionmark.png" /> 
    <span>Tooltip Text.</span> 
</a> 

Answer 1

Sie können nicht einen Übergang zu einem Element mit display:none; fügen Sie es wie folgt tun müssen:

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; 
} 

Nur Opazität verwenden Das ist übergangsweise möglich. Anschauliches Beispiel: https://jsfiddle.net/wbpbcyfz/1/