Get Latest Tricks Alert Daily
Follow Readers

UL List Hover Background Effect With Css3


css3 ul list hover effect
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.


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%;
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

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


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


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!



  1. Does this work on widgets as well? :) I tried but couldn't get it to work. This is similar to what I want to achieve..

    Thanks in advance

    1. @sally t. le

      Yes ofcourse it will work in widgets. just you have to replace .post to .any name
      if you want to change all widget list style in sidebar then replace .post to .sidebar

  2. This comment has been removed by the author.

  3. very informative articular, Thanks for sharing this