how to achieve the moving sparking effect with css and javascript as in css-tricks.com footer

[username]

I posted this question in [stackoverflow.com](http://tinyurl.com/93xwddf “css jquery”). A user recommended to post the question here. I am just pasting the question here :

[Here](https://css-tricks.com/gallery/think-less-do-more/ “css-tricks footer”) if you hover the mouse on any of the links (i.e. ‘The Bookshelf’ link)in the footer, you get a tad sparking effect moving leftward.

I tried with firebug but could not make any clue as to how that is achieved.

Suppose I consider the always-showing white border (?) to be a single parent div, and the sparking divs to be individual ones inside that. Then when the mouse-hover takes place, jquery is supposed to be used to apply background color or border for the child divs in left order . Even then the situation arises that those child divs make the height of the parent div greater than the that of the children contrary to what is apparent in the url.

For the test scenario, I used a parent div ( class_1 ) and one child div ( class_2 ) instead of many:

html:

css:

.class_1{
height111:1px;

width:150px;
margin:0 auto;

border:2px solid red;

}
.class_2{

width:70px;
margin:0 auto;
border:1px solid green;

}

What should be the proper way?

[Kitty Giraudel]

Each anchor contains a span.

.link-list a > span {

position: absolute;

pointer-events: none;

bottom: 0;

width: 100%;

height: 1px;

margin-bottom: 3px;

left: 0;

background: linear-gradient(left, white, white 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0));

background-position: 100% 0;

transition: background 0s linear;

}



.link-list a:hover > span,

.link-list a:focus > span {

background-position: -100% 0;

transition: background 0.4s;

}

Done.

[Author]

Posts