1

I have a div with background color. when i hover the div change the background color but the color should push from left. only push the background color from left.

user3606893
  • 15
  • 6
  • 2
    Can you provide some code or a jsFiddle so we can help you? :) – roemel Jul 02 '14 at 07:11
  • 1
    You should show us the code that you have already, if you have none then this question should **not** be on this site. Code shall not be written for you, we **will** however help you solve the problem you have with your code and explain where and what you have done wrong. – Ruddy Jul 02 '14 at 07:22

1 Answers1

1

Check this out:

Credit goes here: Fill background color left to right CSS

A little bit of additional search would have helped you on your own.

jsfiddle

http://jsfiddle.net/75Umu/323/

ul {
    list-style-type:none;
}

ul li a {
    text-decoration:none;
}

.skillsDouble {
    float: left;
    margin-right: 1px;
}

.skillsDouble li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to right, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.2s ease;
}

.skillsDouble li:hover {
    background-position:left bottom;
}

.skillsDouble li a {
    color:white;
}
Community
  • 1
  • 1
parkourkarthik
  • 834
  • 1
  • 8
  • 20
  • 2
    I'm pretty sure this isn't your code as there are 323 versions of that fiddle... You should give credit to whoever/wherever you got it from. You should also not answer questions like this, the OP has made no effort at all and overall we should not encourage more users to do the same. – Ruddy Jul 02 '14 at 07:33
  • Of course it's not mine. But I made some little changes as per his question in order to help him out. Sorry for encouraging him. – parkourkarthik Jul 02 '14 at 07:37
  • So you should give credit to whoever created it, changing the speed of the transition isn't enough to call the code your own. – Ruddy Jul 02 '14 at 07:39
  • thanks a lot it is fine working.. – user3606893 Jul 02 '14 at 13:45