Motyar

Creating value through Programming

Download local Business Data
GeoData
Download local businesses data as CSV

Aug 15, 2010

Flash like Growing Bubble Effect with CSS

In this post we will learn to create one more cool effect with pure Css. In this effect bubbles grows on hover and looks so cool. I am using pure CSS and CSS3(for easing).




CODE

CSS


.bub{
  text-decoration:none;
  text-align:center;
  position:absolute;
  top:200px;
  left:200px;
  width:50px;
  height:50px;
  background-color:#33CCFF;
  border-radius:50px;
  -moz-border-radius50px;
  -webkit-border-radius50px;
  font-family'MuseoCustom''Century Gothic'ArialHelveticasans-serif;
  font-size:110%;
  line-height:1.4em;
  color:#FFf;
}

.bub:hover{
  top:130px;  left:130px;  width:200px;  height:200px;  border-radius:400px;
  -moz-border-radius400px;
  -webkit-border-radius400px;
  -webkit-transitionease 1s;
   -moz-transitionease 1s;
   z-index:10;
}

.bub i{
  top:12px;  position:relative;  font-size:60%;  text-transform:none;
}
.bub span{
display:none;
position:relative;
top:80px;
text-decoration:none;
 }
.bub:hover span{
display:block;
}
 



HTML
 
<class="bub" href="http://twitter.com/motyar">
<i>Twitter</i>
<span>Follow me <br /> on twitter</span>
</a
 
<class="bub" href="http://facebook.com/motyar" 
 style="margin-left:50px;background-color:#3B5998;">
<i>Facebook</i>
<span>Be Friend <br /> on facebook</span>
</a
 
<class="bub" href="http://feeds.feedburner.com/motyarblogspot"  
style="margin-left:100px;background-color:#F15E28;">
<i>RSS</i><span>Get Free Update <br /> via RSS</span>
</a>


<class="bub" href="http://www.linkedin.com/in/dharmmotyar"  
style="margin-left:150px;background-color:#60AACE;">
<i>LinkedIn</i>
<span>Add me<br />to your Network</span>
</a>
 

Demo



You can see the working demo here. Open it in Chrome or Safari to see the easing effect.

Labels: , , ,


By :