Get Latest Tricks Alert Daily
Follow Readers

UL List Hover Background Effect With Css3


SHARE:

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.

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:



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!

 

3 comments:

  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
    Sally

    ReplyDelete
    Replies
    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

      Delete