Insite Design Lab

• Tweet

I’ve been seeing this awesome hover effect a lot on the web lately and just had to re-create it.

The last place I saw it was on movethewebforward.com under Open-Source projects worth your time

List Item Hover Effect:

Hover Over List Items To See The Effect.

• Art party bicycle rights.- Art party bicycle rights vinyl fanny
• Photo booth mcsweeney’s.- Coffee brunch tumblr jean shorts carles
• Letterpress chambray.- Four loko 3 wolf moon tattooed tumblr.
• Next level echo.- Irony farm-to-table dreamcatcher.
• Readymade etsy.- 3 wolf moon tofu mcsweeney’s.

The Code

<li>Art party bicycle rights.<span>- Art party bicycle rights vinyl fanny</span></li>
<li>Photo booth mcsweeney's.<span>- Coffee brunch tumblr jean shorts carles</span></li>
<li>Letterpress chambray.<span>- Four loko 3 wolf moon tattooed tumblr.</span></li>
<li>Next level echo.<span>- Irony farm-to-table dreamcatcher.</span></li>
<li>Readymade etsy.<span>- 3 wolf moon tofu mcsweeney's.</span></li>

li span { opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
     -moz-transition: opacity 0.3s ease-out;
      -ms-transition: opacity 0.3s ease-out;
       -o-transition: opacity 0.3s ease-out;
          transition: opacity 0.3s ease-out;
}

li:hover > span, .touch li > span { opacity: 1;}

Code Attribution – Move The Web Forward

That CSS came straight from Move The Web Forward. It’s one of the best sites on the internet, and you should all go check it out after commenting on my awesome blog post!