Exite uma infinidade de formas para fazer isso. Eu fiz um pequeno exemplo que pode te ajudar. Leia o código e de uma estudada nele para entender o que foi feito e como vc pode customiza-lo. Deixei o css o mais simples possível pra ficar mais fácil de entender.
Usei transition
para fazer o efeito aparecendo e um pseudo elemento para criar a legenda usando um atributo custom data-name
no content
do pseudo elemento. Outra coisa o elemento <img>
não precisa da tag de fechamento </img>
Veja o exemplo para entender melhor:
a {
position: relative;
}
a::after {
content: attr(data-name);
position: absolute;
left: 0;
top: 100%;
width: 100%;
background-color: red;
text-align: center;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: opacity 300ms, transform 300ms;
}
a:hover::after {
transform: scaleY(1);
opacity: 1;
}
<a target="_blank" data-name="legenda" href="cadastro" ><img src="https://cssreference.io/images/css-reference-icon.png" style="margin:2px; width: 100px;"></a>
<a target="_blank" data-name="legenda" href="empresas.php"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIBmLAlfom6jbOjZGV71PLUC_nlr__DfkDMI0Ny4vY4R3fKc_n"style="margin:2px; width:100px;"></a>