Rollover effect to UL lists using CSS3

Here I am going to use the technique to add a nice rollover effect to UL lists.

Introduction

 

Here I am going to use the technique to add a nice rollover effect to UL lists so the user can easily home in on a particular list item just by rolling the mouse over it. This animation uses CSS3, which works in IE10+, FF, Chrome, and Safari.

 

Implementation

 

CSS code

 

Put this CSS code in the head section:

<style>
ul.animatedbgul {
     margin: 0;
     padding: 0;
     list-style: none;
}

ul.animatedbgul li {
     width: 100%;
     clear: left;
     /* clear contents of inner span, which will be floated left */
     overflow: hidden;
     /* clear contents of an inner span, which will be floated left */
}

ul.animatedbgul li span {
     display: block;
     float: left;
     /* cause width of each span to take up only as much space as needed */
     min-width: 0px;
     /* animated property. Explicit min-width defined so animation works. */
     margin-bottom: 5px;
     padding: 8px;
     color: #5d5d5d;
}

ul.animatedbgul li:hover span {
     color: #fff;
     background: #ce3e3e;
     border-left: 8px solid darkred;
     min-width: 450px;
     /* animated property. Set to desired final length of background */
     -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;
}
</style>

Html code

 

Place this HTML code in body section:

<ul class="animatedbgul">
      <li><span>Java</span></li>
      <li><span>Python</span></li>
      <li><span>Clarion</span></li>
      <li><span>Clipper</span></li>
</ul>