simply c design: Demo Making BubbleLink CSS 3

Bubblelink is a design menu / links using CSS3 and to beautify your website.Immediately wrote the demo here:
Because bubblelink using CSS 3, I recommend seeing this demo with browsers that support CSS 3 (google chrome).

Hover Me !

Go to my Blog

Code css :

.logo{
font-size: 24px;
text-align: center;
cursor: pointer;
width: 300px;
height: 48px;
display: table;
overflow: hidden;
margin: 0px auto 0px auto;
}
.logo h1{
margin: 0px;
padding: 0px;
width: 280px;
height: 47px;
background: url(images/title.png) no-repeat;
text-indent: 999999px;
}
.logo h1:hover{
margin: 0px;
padding: 0px;
width: 280px;
height: 47px;
background: url(images/title-hover.png) no-repeat;
text-indent: 999999px;
}
.logo h1 a{
visibility: hidden;
}
.logo > div{
position: absolute;
display: inline;
background: #000;
color: #fff;
padding: 10px;
margin-left: -5px;
margin-top: -10px;
font-size: 20px;
opacity: 0;
visibility: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.logo:hover > div{
margin-top: 5px;
opacity: 1;
visibility: visible;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

code html :

<div id=”wrap”>
<div class=”logo”>
<h1><a href=”">WebsiteTitle</a></h1>
<div class=”text”>Hallo, it is our website description</div>
</div>
</div>

Hopefully this tutorial useful bubblink, download here:

Download Script !