There are any number of JavaScript and jQuery plugins that do this effect, but what happens if a potential client does not have JavaScript enabled? Do you not show the content, or just not show the animation? With CSS, you can have your cake, and eat it too.

Hovering Share Bar

As an example, we’re going to work on a social media share bar. You’ve undoubtedly seen them on many sites (heck, we’ve even got them on this site). They look snazzy and can drive your social ranking up. But turn off JavaScript and most of the time you’re left with a boring text link that looks out of place on your webpage.

So here is our CSS only share bar that ‘pops’.

First of all, our mark-up:

<div class=”sharebar”>
<a rel=”nofollow” href=”http://www.delicious.com/save”><img src=”/images/delicious.png” alt=”Delicious” title=”Bookmark on Delicious”></a>
<a rel=”nofollow” href=”http://digg.com/submit”><img src=”/images/digg.png” alt=”Digg” title=”Bookmark on Digg”></a>
<a rel=”nofollow” href=”http://www.facebook.com/share.php”><img src=”/images/facebook.png” alt=”Facebook” title=”Bookmark on Facebook”></a>
<a rel=”nofollow” href=”http://reddit.com/submit”><img src=”/images/reddit.png” alt=”Reddit” title=”Bookmark on Reddit”></a>
<a rel=”nofollow” href=”http://twitter.com/share”><img src=”/images/twitter.png” alt=”Twitter” title=”Bookmark on Twitter”></a>
</div>

and our CSS:

.sharebar a img
{
width:20px;
}
.sharebar a:hover
{
position:absolute;
}
.sharebar a:hover img
{
width:34px;
position:relative;
left:-6px;
}
.sharebar a:hover + a img
{
padding-left:25px;
}

So what does all this mean?
By default, we want our images to be smallish. So we set the width at about a third of the original size at 20 pixels.

Small Share Bar Icons

Now comes the interesting part. When we hover over the link we want it to get larger. The problem with this is that it shifts the rest of the icons after it, and this can mess up the layout of your page (see image 3). By positioning the parent anchor as absolute we can have it, and our image, pop out of the mark-up. This will shift the following icons to the left, to fill in the space left by our ‘missing’ icon.

Large Share Bar Icon (image 3)

Shifted Share Bar Icons

Using the css sibling select (+) we can select the image of the next anchor and give it some padding to push it back to the right.

Share Bar Icons Stay In Place

Finally, just to make it appear the hovering image has scaled from it’s centre, and not just pushed out to the side, we set it’s position as relative and shift it left by a few pixels.

'Acitve' Icon Scales From Centre

This is valid (x)html. Valid CSS. And most importantly, it works with JavaScript turned off which means that your web page is still accessible, and you still have your cool effect to wow your client base.

Get Involved