tak, jak to wygląda przykładowo na tej stronie u samej góry(Najnowsze pytania, Ostatnia aktywność, Bez odpowiedzi, Zadaj pytanie, itd.). Czy to jest jakaś forma zanikania? A raczej przeciwieństwo zanikania? Jak można coś podobnego wykombinować? :)
To co jest na tej stronie w nagłówku, jest doklejane jako pseudo-element , z contentem "zasysanym" z atrybutu data-info.
Sama animacja polega na stopniowym zmniejszaniu opacity i pozycji top.
W narzędziach deweloperskich można dokładnie obejrzeć kod, natomiast wkleję Ci sam CSS dla pseudo-elementu, bo to on powinien Cię najbardziej interesować.
/** Code for hover info **/
dfn {
font-style: normal;
position: relative;
}
dfn::after {
content: attr(data-info);
display: inline;
position: absolute;
top: 5px; left: -5px;
opacity: 0;
width: 155px;
font-size: 14px;
font-weight: 700;
line-height: 1.5em;
padding: 0.2em 0.1em;
background: rgba(31,43,55,0.95);
color: #fff;
pointer-events: none; /* This prevents the box from apearing when hovered. */
transition: opacity 250ms, top 250ms;
}
dfn::before {
}
dfn:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}
Na uzupełnienie łap kod na jsfiddle'u