Create animated hover effect without Using jqueryUI

| By Webner

We can add animated hover effect using css and html also. See example below:

  1.  Create simple html code like this:
<div class="co-sm-12 blog-categories">
<li><a href="#">Customizable Courseware</a></li>
<li><a href="#">Online Learning</a></li>
<li><a href="#">Skills Assessments</a></li>
<li><a href="#">Quick References</a></li>
<li><a href="#">Exercise Files</a></li>
<li><a href="#">Instructor Guides</a></li>
  1.  After this, define css property according to design:
.blog-categories li {
display: inline-block;
width: 100%;
text-align: left;
padding: 6px 0 6px 0px;
position: relative;/*this is important to create hover effect.*/

Then define CSS Pseudo-elements :after and :before :
:after selector property is used to insert something after the content and ::before selector property is used to insert something before the content:

.blog-categories li:after {
position: absolute;
content: "\f054";
width: 10px;
height: 10px;
left: -25px;
transition: all 0.2s ease-in 0; /*This will create animation effect.*/
top: 13px;
font-family: FontAwesome;
font-size: 9px;
  1. Output of this Html will be:

Define css for Anchor tag:

.blog-categories li a {
color: #999;
padding-bottom: 7px;
position: relative;
.blog-categories li a:after {
position: absolute;
content: '';
width: 0px;
background: #000;
height: 2px;
transition: all 0.2s ease-in 0s;
left: 0;
bottom: -2px;
  1. Now add hover effect with animation:

Change :after property li:hover(left:-25px to -20px)

.blog-categories li:hover:after {
color: #000;
left: -20px;}

Change after property li a:hover:after(width:0px to width: 100%)

.blog-categories li a:hover:after {
width: 100%;

Final Output with animated hover effect:

Leave a Reply

Your email address will not be published. Required fields are marked *