CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Mearko
Mearko

Reputation: 19

Color transition

I'm trying to make a color transition but I don't know how to make the effect that the color will be added gradually without increase size.

     a:hover{
        background-color:#c0392b; 
        transition: 1000ms linear;
        padding:20px;
        <nav class="navigation-in-center">
            <ul class="container menu group">
                <li><a href="#">A PROPOS</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">IDEES</a></li>
                <li><a href="#">CHEQUES CADEUX</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>

Upvotes: 0

Views: 286

Answers (2)

Dung Le
Dung Le

Reputation: 96

You should add a transition for "background-color" only. transition: background-color 1000ms linear;

a{
display: inline-block;
  padding:20px;
   transition: background-color 1000ms linear;
}
a:hover{
        background-color:#c0392b; 
       }
        
<nav class="navigation-in-center">
            <ul class="container menu group">
                <li><a href="#">A PROPOS</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">IDEES</a></li>
                <li><a href="#">CHEQUES CADEUX</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>

Upvotes: 0

dhruw lalan
dhruw lalan

Reputation: 801

Your size is increasing due to padding.
Remove the padding and apply transition to the a element, not in it's hover state:

a {
  transition: all 1000ms linear;
}
a:hover {
  background-color: #c0392b;
}
<nav class="navigation-in-center">
  <ul class="container menu group">
    <li><a href="#">A PROPOS</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">IDEES</a></li>
    <li><a href="#">CHEQUES CADEUX</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>

Upvotes: 1

Related Questions