How is this Hover effect done?

Asked

Viewed 76 times

-4

inserir a descrição da imagem aqui

It’s the little colored ribbon that expands...

javascript html css

  • This Hover effect is a lot in link animation, you can create these effects with both css and javascript, search a little friend and you will understand!

  • 1

    pixel innovates, I edited the question by putting a .gif that I filmed on this site that you indicated. Next time you can do it yourself, or take pictures of the effect that you want. You already know the site and how to create and format a good question...

1 answer

7


The trick is to use transform associated with the pseudo element :after and with a zoom transition, like a magnifying glass effect.

Something like that:

div {
    width: 150px;
}
div:after {
    display: block;
    content: '';
    border-bottom: 5px solid #2e7061;
    transform: scaleX(0);
}
div:hover:after {
    transform: scaleX(1);
    transition: transform 325ms ease-in-out;
}
<div>Traz aqui o mouse!</div>

Browser other questions tagged javascript html css

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