Hover mouse - image descend effect

Asked

Viewed 200 times

1

How can I make an effect by hovering the mouse over the image, scrolling a box below that image? Ps: similar to MENU when hovering the 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>

html css

1 answer

0


There are a myriad of ways to do this. I’ve 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 made css as simple as possible to make it easier to understand.

I used transition to make the effect appear and a pseudo element to create the legend using a custom attribute data-name in the content of the pseudo element. Something else the element <img> nay 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.