Pass mouse - image down effect

Navigation
1

How can I make an effect when hovering over the image, lowering a box below that image? Ps: Similar to MENU when mouseover 

<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>
    
asked by anonymous 24.07.2018 / 01:01

1 answer

0

There are a myriad of ways to do this. I made a small example that can help you. Read the code and one studied in it to understand what was done and how you can customize it. I left the css as simple as possible to make it easier to understand.

I used transition to make the appearance appear and a pseudo element to create the caption using a custom attribute data-name in the content of the pseudo element. Another thing the element <img> does not needs the closing tag </img>

See the example to better understand: 

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>
    
24.07.2018 / 01:21
How to get the Primary and Secondary DNS of Windows using Python? Issuance of NF-e 4.0: Goiás (C # / Net)