Awesome Info Box For Websites Using CSS3

By Vinod Suthersan → Tuesday, May 1, 2012
Tutorial teaches on how to create an awesome looking mouse hover CSS3 info box. The message box shows up only on mouse hover.

Awesome Info Box CSS3Info boxes is one of the most useful thing when it comes to designing a website, especially if you are running a website on knowledge, facts and snippets. You may like your readers to know the information as and when possible with the info box. The info boxes can be a simple static box, a pop up box[when the user lands], a welcome box which goes away later, or a mouse hover info box. Today, we shall see an awesome looking CSS3 info box using the CSS3 circling properties.

You might also be interested in:

CSS3 Draw Circles
Triangles using CSS3

Objective:

1. Create an awesome looking Info box using CSS3.
2. Show the message or info only on mouse hover.
3. Design the info icon to a cool circle with "i" at the center.
4. Create an faded overlay of the message.

Technology used:

1. CSS3[CSS3 radius property]
2. HTML


The CSS3 code

#info {
  color: #ffc;
  position: relative;
  width:400px;
  height:120px;
  z-index: 99;
  border: none;
  border-radius: 20px;
  padding: 20px;
  background: transparent;
  -webkit-transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  transition: background-color .5s;
  font-size: 70%;
}

#info>* {
  margin: 20px 40px 30px 0;
  cursor: default;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
  zoom: 1;  /* Force elements to be positioned in IE7, otherwise opacity doesn't work! */
}

#info p {

  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#info h1 {
  position: relative;
  z-index: 99;
  margin: 0;
  padding: 17px 1px 4px 14px;

  width: 20px;
  height: 14px;
  font-size: 20px;
  border: 3px solid #968d0e;
  line-height: 1px;
  border-radius: 20px;
  color: #4ddeff;
  opacity: .5;
  filter: alpha(opacity=50);
}

#info1 h1 {
  position: relative;
  z-index: 99;
  margin: 0;
  padding: 17px 1px 4px 14px;

  width: 20px;
  height: 14px;
  font-size: 20px;
  border: 3px solid yellow;
  line-height: 1px;
  border-radius: 20px;
  color: green;
  opacity: .5;
  filter: alpha(opacity=50);
}

#info:hover, #info.hover {
  background: rgba(50,50,50,.6);
background:#386e69;

}

#info:hover *, #info.hover * {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #fcfcfc;
}


#info a {
  color: #ffc;
}


Explanation:

First we are creating a cool looking info box which shall appear on mouse hover over the info circle or on to the area where the info box is hidden.
Next we add the letter "i" and create a circle using CSS3 border property.
On mouse hover 2 things happen, the letter changes color and the super cool info box appears.

Hope you liked this cool looking info box. Thanks for visiting. Have a great time with rest of the articles.

~iTechColumn

Post Tags:

Karan Vyas

Karan Vyas is the founder at Itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

No Comment to " Awesome Info Box For Websites Using CSS3 "

Your comment here