CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CBreeze
CBreeze

Reputation: 2983

Fill li item on hover in CSS

I am trying to animate an <li> so that on hover it appears that there is a fill effect going from left to right.

This is what I have so far.

ul {
	list-style-type: none;
}

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

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to left, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:right bottom;
}
.hoverTest li a {
    color:white;
}
   <div class="hoverTest">
    <ul>
	<li><a href="#">Test Button</a></li>
    </ul>
 </div>

I have a number of issues with this. First of all the fill effect is coming from right to left whereas I would like the opposite. No matter what I have tried with changing the positions of the backgrounds I just cannot get this to work.

Secondly, I would like there to be a small strip of the fill colour displayed to begin with as in this example by Jay Holtslander : https://codepen.io/j_holtslander/full/XmpMEp/

Finally the code I have at the moment seems to be relatively clunky, it is taken from this answer in 2013 by beardhatcode. Is there a more modern, simpler way to implement this effect?

Upvotes: 2

Views: 589

Answers (5)

Ehsan
Ehsan

Reputation: 12969

Try This:

ul {
    list-style: none;
    padding: 0;
    background: blue;
    display: inline-block;
}

li {
    position: relative;
}

li:before {
    background-color: red;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    transition: width 500ms ease;
}

li:hover:before {
   width: 100%;
}

a {
    text-decoration: none;
    color: #FFF;
    display: inline-block;
    position: relative;
    padding: 20px;
}
<ul>
    <li>
        <a href="#">Test Button</a>
    </li>
</ul>

Upvotes: 0

A. Ahmed
A. Ahmed

Reputation: 93

You can achieve this using box-shadow css property with inset value.

ul {
	list-style-type: none;
}

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

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: blue;
    /* Old browsers */
    box-shadow: inset 5px 0px 0px red;
    transition: 1s ease;
}
.hoverTest li:hover {
    box-shadow: inset 140px 0px 0px red;
}
    
}
.hoverTest li:hover {
    background-position:right bottom;
}
.hoverTest li a {
    color:white;
}
	<div class="hoverTest">
		<ul>
			<li><a href="#">Test Button</a>
			</li>
		</ul>
	</div>

Upvotes: 1

shivangi saxena
shivangi saxena

Reputation: 1

ul {
    list-style-type: none;
}

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

.hoverTest li {
    width: 100px;
    padding: 11px 16px;
    text-align: center;
    float: left;
    background: #ff3232;
    background: linear-gradient(to right, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position: right;
    margin-left: 10px;
    transition: all 0.5s ease;
}
.hoverTest li:hover {
    background-position: left;
}
.hoverTest li a {
    color:white;
}






<div class="hoverTest">
        <ul>
            <li><a href="#">Test Button</a>
            </li>
        </ul>
</div>

Upvotes: 0

Rahele Dadmand
Rahele Dadmand

Reputation: 573

try this , it will work :

.hoverTest li {
   background: linear-gradient(to left, blue 50%, red 50%);
   border-left:3px solid red;
}
.hoverTest li:hover {
    background-position:left;
}

Upvotes: 0

Jesse
Jesse

Reputation: 3642

I changed the background-position around and made the red background a bit larger than the blue one, which seems to have the desired effect.

ul {
	list-style-type: none;
}

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

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to right, red 52%, blue 48%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:left bottom;
}
.hoverTest li a {
    color:white;
}
	<div class="hoverTest">
		<ul>
			<li><a href="#">Test Button</a>
			</li>
		</ul>
	</div>

Take a look at the updated fiddle: https://jsfiddle.net/jdLysrn2/1/

Upvotes: 1

Related Questions