Box shadow appearing from right to left

Question

Box shadow appearing from right to left

Navigation

#1 by (1 votes)

3

I have the following link code that is now exactly as I want it. Except because I want the hover effect to appear from right to left. How could I do it with box shadow?

Follow the layout to get an idea.

I'm breaking my head but I have not gotten anything yet.

If you have any other solution for this that does not use the shadow box it also works, as long as you do not use images.

Thank you!

html css3

asked by anonymous 23.10.2016 / 18:39

1 answer

Generate output in csv from a code in python How to apply the_content filter in function get_the_content WordPress?

score 1 · Answer 1

Here's an idea you can adapt:

*{
  margin:0;
}
.header{
  float:left;
  background-color: blue;
  height:auto;
  padding:16px;
}

li{
  font: 500 16px Poppins, sans-serif;
 
        width:auto;
        margin-right: 20px;
        height:5px;
        display: inline-block;
        line-height:0px;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-attachment: fixed;
        background-size: 205% 100% ;
        background-position:  ;
        transition:all 1s ease;
        list-style-type:none;
        
}
li:hover{
       
        background-position:right;}
a{
  text-decoration:none;
  color: white;
}

<div class="header">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">sobre</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contato</a></li>
    <li><a href="#">suporte</a></li> 
  </ul>
</div>