Performancing Metrics

How To Create A Cool “Bubble Up” Effect For Your Blog’s Icons Using CSS

CSS Bubble EffectA few years ago, the bubble effect that I’m about to show you to create could only be executed using flash animation but thanks to some CSS innovation, the limitations and boundaries to simple yet elegant design are crumbling. For any blogger or website owner, its very important to learn a little HTML and CSS; you will find that you have more control over your blog’s design and will be able to implement simple changes that can make your blog’s design stand out.

Here is a short and simple tutorial to give your buttons a nice bubble up effect that is sure to catch your readers’ attention, using the image swap method in CSS.

Step 1

Access the page that you would like your icons to show and insert the code below:

[code]<ul id="bubble">
<a href="" title="Blogging Pro’s RSS Feed">
<img src="images/feed.png" alt="Blogging Pro’s RSS Feed" />
<img src="images/feed_large.png" alt="Blogging Pro’s RSS Feed" />
<a href="" title="Feed via Emal">
<img src="images/email.png" alt="Feed via Emal" />
<img src="images/email_large.png" alt="Feed via Emal" />
<a href="" title="Follow us on Twitter">
<img src="images/twitter.png" alt="Follow us on Twitter" />
<img src="images/twitter_large.png" alt="Follow us on Twitter" />
<a href="" title="Connect With Us on Facebook">
<img src="images/facebook.png" alt="Connect With Us on Facebook" />
<img src="images/facebook_large.png" alt="Connect With Us on Facebook" />

The code above uses 2 images for each button link and will be arranged in a horizontal list format. In the next steps you will see that the code allows the buttons being hovered to seem to be above the others.

Also, ensure that the links in the code above are replaced by your own social profile links and you need to upload your icons to the relevant directories. You can find lots of free icons at

Step 2

Add the CSS code below to your style.css file.
[code]#bubble {
list-style: none;
margin: 20px 0px 0px;
padding: 0px;
<pre>#bubble li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 70px;
height: 70px;

In the above code we had to specify the height and width of the <li> elements because we do not want the list to be moving and changing sizes when the cursor hovers. 70 px is the size of the small images before hovering so we don’t want these too big.

Step 3

Still in the style.css file, add the following code for the links.
[code]#bubble li a img {
position: relative;
border: none;

#bubble li a img.large {
display: none;

#bubble li a:hover img.small {
display: none;
z-index: 0;

#bubble li a:hover img.large {
<pre> display: block;
margin-top: -30px;
margin-left: -30px;
z-index: 1000;

Note: In the above it is very important to set the position to relative.

Step 4

Finally, for Internet Explorer and its limitations, we will add some extra code to deal with conflicts along with your HTML code.
<!–[if IE 7]>
<style type="text/css">
#bubble li {
display: inline;

That’s it! You should now have that cool bubble up effect for your share buttons on your blog. Remember, the HTML code can be placed anywhere on your blog, so be specific with the files you choose to edit.


If you have any difficulties implementing the code please feel free to ask questions in the comments below and we will be happy to help.


Categories: Blog Design, WordPress Tutorials
Tags: , , ,

This post was written by . You can visit the for a short bio, more posts, and other information about the author.

Comment with Your Facebook Account


  1. Adriana says: 2/25/2012

    thanks for share!


Performancing Metrics
EatonWeb Portal