Bubble Effect For Icons Using CSS3

CSS (Cascading Style Sheets) is an important aspect in web designing and development. Many bloggers and webmasters use CSS to apply different attributes to make blog or website more beautiful and attractive. Nowadays CSS3 provides dynamic options which can use in different practices in blogs and websites development. So here I am going to share one of the widget using CSS3 and that is the BUBBLE EFFECT FOR ICONS.

LIVE DEMO

You can apply this effect by following the simple steps:

1. Login to your Blogger Dashboard.
   
   
2. Go to Template.
   
   
3. Backup your Template. (Click Here To See, How?)
   
   
4. Now click “EDIT HTML.”
   
   
5. Press CTRL+F, and search for </head> tag.
   
   
6. Just before </head> tag, paste the following code:

<style type="text/css">

.bubbleeffect
{
list-style-type:none;
margin:0;
padding:0;
}
.bubbleeffect li
{
display:inline;
width: 65px;
height:60px;
}
.bubbleeffect li img
{
width: 55px; /* for width of images */
height: 60px; /* for height of images */
border:0;
margin-right: 12px; /*for spacing between images*/
-moz-transition:-moz-transform 0.1s ease-in;-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubbleeffect li img:hover
{
-moz-transform:scale(1.8); /* for image scaling */
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

7. Now go to “LAYOUT” > “ADD A GADGET”.

8. Select “HTML/JAVASCRIPT” from the list and add the following code:

 <ul class="bubbleeffect">
<li><a href="#"> <img src="#" title="#" /></a></li>
<li><a href="#"> <img src="#" title="#" /></a></li>
<li><a href="#"> <img src="#" title="#" /></a></li>
</ul>

9. Click “SAVE”.

That’s it, you are all done. Refresh your blog to see the widget.

Note:

Change “#” in URL,to your OWN LINK.

Change ”#” in IMAGE SRC, to your own IMAGE LINK.

Change “#” in TITLE, to your OWN TITLE.

I have just added 3 icons, you can add more according to your requirement.

This widget works with all latest browsers, except INTERNET EXPLORER. 

- Please share the post with your friends and don't forget to add your valuable feedback  in comments box below.