1

Como posso fazer um efeito ao passar o mouse em cima da imagem, descer uma caixa em baixo dessa imagem? Ps: parecido com MENU quando passa o mouse

<a target="_blank" href="cadastro" ><img src="https://cssreference.io/images/css-reference-icon.png" style="margin:2px; width: 100px;"></img></a>


<a target="_blank" href="empresas.php"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIBmLAlfom6jbOjZGV71PLUC_nlr__DfkDMI0Ny4vY4R3fKc_n"style="margin:2px; width:100px;"></img></a>

1 Resposta 1

0

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>
    

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .