Transition at the Hover

Asked

Viewed 39 times

-1

Hi, I was wondering how to use the property transition to achieve the result you have in the Nav-bar read of the site http://tableless.com.br/.

javascript jquery html css

1 answer

2

This transition is made on the thickness of the border-bottom.

Basically the two states are:

li {
    transition: border-bottom .2s linear;
    border-bottom: 0px solid red;
}

li:hover {
    border-bottom: 5px solid red;
}

A minimalist example would be like this:

li {
    transition: border-bottom .2s linear;
    border-bottom: 0px solid red;
    padding: 10px;
    display: inline;
}

li:hover {
    border-bottom: 5px solid red;
}
<ul>
    <li>Um</li>
    <li>Dois</li>
    <li>Três</li>
</ul>

jsFiddle: https://jsfiddle.net/a6z17Ls2/

  • I understood well how to use now, thanks for the help!

  • I have seen in other examples, this effect arising in another way, for example: from left to right, from the middle to the sides, as they would be in these cases?

  • @Italoaraujo in this case need another (s) helmet(s) that are positioned to do this effect. For example: https://jsfiddle.net/q0zhffx9/, or with a single bar that follows all, controlled by javascript. But if that’s targeted for another question, it has to be a slightly different technique.

Browser other questions tagged javascript jquery html css

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