Here’s a pretty neat feature that you might want to put in your blog or website! It’s an animated user avatar badge by Manuel Ebert from Spain. What it does is that it slides user’s pic ID to the side revealing 3 social icon links underneath, though I’m expecting that with a little tweak in the code you can pretty much add a couple more.

The effect is achieved through the use of ‘transition’ CSS property. It works perfectly in all major browsers except Internet Explorer (not much surprise there) although it degrades nicely in Internet Explorer version 9. Check out the DEMO.

The basic HTML markup for it is as follows:

<div>

<div class="user" title="@maebert">

<ul class="userlinks">

<a><li style="background-image: url(http://www.google.com/s2/u/0/favicons?domain=plus.google.com)"></li></a>

<a><li style="background-image: url(http://www.google.com/s2/u/0/favicons?domain=tumblr.com)"></li></a>

<a><li style="background-image: url(http://www.google.com/s2/u/0/favicons?domain=dribbble.com)"></li></a>

</ul>

<div class="cover"></div>

</div>
 </div>
And below is the CSS structure:
body {

background-image: url(http://subtlepatterns.com/patterns/tileable_wood_texture.png);

margin: ;
 }
div.user {

width: 68px;

height: 68px;

margin: 48px auto 0px auto;

background: url(http://subtlepatterns.com/patterns/carbon_fibre.png);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.7), 0px 1px 0px rgba(255,255,255,.8), 0px -1px 0px rgba(0,0,0,.4);

-moz-box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.7), 0px 1px 0px rgba(255,255,255,.8), 0px -1px 0px rgba(0,0,0,.4);

box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,.7), 0px 1px 0px rgba(255,255,255,.8), 0px -1px 0px rgba(0,0,0,.4);

position: relative;

}

div.user div.cover {

width: 64px;

height: 64px;

background: url(http://cssdeck.com/uploads/media/items/8/8HRjhgI.png) center center no-repeat #aaa;

-webkit-box-shadow: inset 0px 10px 10px -4px rgba(255,255,255,.2), inset 0px -10px 10px -4px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), 0px 0px 2px rgba(0,0,0,.6);

-moz-box-shadow: inset 0px 10px 10px -4px rgba(255,255,255,.2), inset 0px -10px 10px -4px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), 0px 0px 2px rgba(0,0,0,.6);

box-shadow: inset 0px 10px 10px -4px rgba(255,255,255,.2), inset 0px -10px 10px -4px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), 0px 0px 2px rgba(0,0,0,.6);

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

position: absolute;

top: 2px;

left: 2px;

-webkit-transition: left .5s ease, box-shadow .5s ease;

-moz-transition: left .5s ease, box-shadow .5s ease;

-o-transition: left .5s ease, box-shadow .5s ease;

-ms-transition: left .5s ease, box-shadow .5s ease;

transition: left .5s ease, box-shadow .5s ease;

}

div.user:hover div.cover {
 -webkit-box-shadow: inset 0px 10px 10px -4px rgba(255,255,255,.2), inset 0px -10px 10px -4px
rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), 6px 0px 8px rgba(0,0,0,.6);

-moz-box-shadow: inset 0px 10px 10px -4px rgba(255,255,255,.2), inset 0px -10px 10px -4px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), 6px 0px 8px rgba(0,0,0,.6);

box-shadow: inset 0px 10px 10px -4px rgba(255,255,255,.2), inset 0px -10px 10px -4px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), 6px 0px 8px rgba(0,0,0,.6);

left: -28px;

}

div.user:hover:after {

background: rgba(0,0,0,.7);

-webkit-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);

-moz-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);

box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

bottom: 76px;

color: #fff;

content: attr(title);

font-size: 10px;

font-family: "Helvetica Neue", Helvetica, Sans;

text-align: center;

display: block;

padding: 6px 0px;

width: 68px;

display: block;

position: absolute;

text-shadow: 0 -1px 0 #000;

white-space: nowrap;

z-index: 98;

}

div.user:hover:before {

border: solid;

border-color: #111 transparent;

border-color: rgba(0,0,0,1) transparent;

border-width: .4em .4em 0 .4em;

bottom: 70px;

content: "";

display: block;

left: 2em;

position: absolute;

z-index: 99;
}

ul.userlinks {

list-style: none;

margin: 0px;

padding: 6px 0px 0px 44px;

}

ul.userlinks li {

width: 16px;

height: 16px;

margin-bottom: 4px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

ul.userlinks li:hover {

-webkit-box-shadow: 0px 0px 5px rgba(255,255,255,.8);

-moz-box-shadow: 0px 0px 5px rgba(255,255,255,.8);

box-shadow: 0px 0px 5px rgba(255,255,255,.8);

cursor: pointer;

background-color: rgba(255,255,255,.8);
}

Ebert’s other works can be found over at his Dribble and GitHub pages.

Incoming search terms for the article:

• cool avatar badges
• css avatar badge