give bubble effect to images in blogger

How to make Bubble Effect for blogger

See below Images for Demo

• 
 
• 
 
• 
 
• 

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

/*URL: http:www.bloggertrix.com */
.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{

display:inline;

width: 65px;

height:60px;

}



.bubblewrap li img{

width: 55px; 

height: 60px; 

border:0;

margin-right: 12px; 

-webkit-transition:-webkit-transform 0.1s ease-in; 

-o-transition:-o-transform 0.1s ease-in; 

}



.bubblewrap li img:hover{

-moz-transform:scale(1.8); 

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

} 

5.Now paste this HTML code where you want to add your images.

/*URL: http:www.bloggertrix.com */<ul class="bubblewrap">

<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Add to Twitter" /></a></li>
</ul>

6. If you want Change above Red color URL with Your Icon URL

7.Now you can add this to your page.thanks.