CSS3 How To

Awesome Info Box For Websites Using CSS3

CSS3-Info-Box
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

About the author

Karan Vyas

Karan Vyas is the founder at itechcolumn.com, Completed his B.Tech in ECE. He is passionate blogger, Web Developer having vast knowledge on Reverse engineering, Programming, Search Engine Optimization. He's Certified Ethical hacker as well due to his Interest. Apart from this he is involved in Witchcraft Black magic and Hypnotism.

Add Comment

Click here to post a comment

Your email address will not be published. Required fields are marked *