UL List Hover Background Effect With Css3

SHARE:

This CSS3 ul list demonstrates animate the minimum width property of an element that to create a stretchable background effect with css3.
Here we use the technique to add a Hover effect to UL list, so the user can easily navigate in on a particular list item just by hovering the mouse over it.

The ul list animation uses CSS3, which works with mozilla Firefox, google Chrome, IE10+, and Safari browsers.

Demo

Get Code Here

Goto > Edit template > Press Ctrl+F and find [[></b:skin>

and paste this code above [[></b:skin>
and save your template

.post ul{
margin: 0;
padding: 0;
list-style: none;
}

.post ul li{
width: 100%;
clear:left;
overflow: hidden;
}

.post ul li:hover{
color: #fff;
background: #ce3e3e;
border-left: 8px solid darkred;
min-width: 450px;
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

come to post and add ul li list to post section

Html Code

<ul>
<li>List Test 1</li>
<li>List Test 2</li>
<li>List Test 3</li>
<li>List Test 4</li>
</ul>

Customization

Use Html color generator To change color

To change text color Replace colored code
Replace colored change background color
To change sideborder color Relace colored code
Replace colored to change width

SHARE: