CODEWITHSUNDEEP
htmlcss
user3255765
user3255765

Reputation: 87

Slide animate background color left to right using CSS

I am trying to make background color animation start from left to right

ul.vert-one{
    margin:0;padding:0;
    list-style-type:none;
    display:block;
font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;
width:200px;
}

ul.vert-one li{
    margin:0;padding:0;border-top:1px solid #4D0000;
border-bottom:1px solid white;
}

ul.vert-one li span{display:block;text-decoration:none;color:white;
background:#600;padding:0 0 0 20px;width:180px;}

ul.vert-one li span:hover{
background:yellow url("images/vert-one_arrow.gif") no-repeat 0 9px;}
<div style="background:gray">
    <ul class="vert-one" >
  <li>
      <div>
     <span>home</span>
      </div>
     </li>
         <li>
      <div>
      <span>blog</span>
      </div>
     </li>
         </li>
         <li>
      <div>
      <span>About Us</span>
      </div>
     </li>
  
</ul>
</div>

So when I do mouse over, I want yellow color start from left to right. As background color.

JSFiddle

Upvotes: 1

Views: 19392

Answers (3)

Tim
Tim

Reputation: 1690

Another solution would be using pseudo elements, like :after. Have a look at this JSFiddle. I did remove some unnecessary markup. And if those menu items are meant to be links, you should use the <a> tag for that.

ul.vert-one {
    margin:0;
    padding:0;
    list-style-type:none;
    display: block;
    font: bold 16px Helvetica, Verdana, Arial, sans-serif;
    line-height:165%;
    width:200px;
}

ul.vert-one li {
    position: relative;
    margin:0;
    padding:0;
    border-top:1px solid #4D0000;
    border-bottom:1px solid white;
    z-index: 5;
    padding: 0 0 0 20px;
    color:white;
    background:#600;
    width: 180px;
}

ul.vert-one li span {
    position: relative;
    display:block;
    text-decoration:none;
    z-index: 10;
}

ul.vert-one li:after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    color: #fff;
    height: 100%;
    background: yellow;
    opacity: 0;
}

ul.vert-one li:hover:after {
    width: 100%;
    opacity: 1;
    transition: 500ms;
    -webkit-transition: 500ms;
}
    <div style="background:gray">
        <ul class="vert-one">
            <li>
                 <span>home</span>
            </li>
            <li>
                 <span>blog</span>
            </li>
            <li>
                 <span>About Us</span>
            </li>
        </ul>
    </div>

Upvotes: 3

John Stamoutsos
John Stamoutsos

Reputation: 373

Insert this in your

<div class="mybgd" style="background:gray">

Insert this in your CSS

.mybgd { width: 100%; height:100%; margin-right: 200px; float: left; }

Upvotes: -3

George
George

Reputation: 36794

By applying a background gradient to your element, along with a background width of twice the size of your element, you can render it two different colours, by placing two stoppers at 50%.

Then all you need to do is animate the background-position property and you have your effect.

Note:

ul.vert-one li span {
    display:block;
    text-decoration:none;
    color:white;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #600 50%, yellow 50%);
    transition: background-position 1s;
    padding:0 0 0 20px;
    width:180px;
}
ul.vert-one li span:hover {
    background-position: -100% 0;
}
ul.vert-one { margin:0; padding:0; list-style-type:none; display:block; font:bold 16px Helvetica, Verdana, Arial, sans-serif;   }
ul.vert-one li { margin:0; padding:0; border-top:1px solid #4D0000; border-bottom:1px solid white;}
<div style="background:gray">
    <ul class="vert-one">
        <li><div><span>home</span></div></li>
        <li><div><span>blog</span></div></li>
        <li><div><span>About Us</span></div></li>
    </ul>
</div>

Upvotes: 9

Related Questions