Create Social Icons With Sliding Information On Hover Using CSS3

4 Feb , 2014  HTML & CSS 

Social Icons With Sliding Information Using CSS3This tutorial is about how to create social icons with sliding information using CSS3 and no images. The sliding information shows up on mouse hover on the icons.

Today, we have drawn our inspiration from Miro and we will be using the foundation CSS from Zurb. Social icons are very important when you own a website and it becomes more important when your site grows highly fast. If you have a design website, blog, portfolio or agency.

We will be learning how to create a nice looking sliding info boxes with icons in the first place. We will see how the social icons with hover effects look like. You can check the demo and download from below:

DEMO | DOWNLOAD

The best part about this tutorial is we never use the Dribbble, Twitter, Pininterest or Mail image icons, but all of that is coming from our foundation CSS.

You can download the foundation CSS from Zurb.

Upload the files to your sever. The files include: foundation-icons.css, foundation-icons.eot, foundation-icons.ttf, foundation-icons.svg, foundation-icons.woff.

Let’s check the HTML and CSS3 below:

HTML:

CSS3:

Foundation Icons CSS:

Explanation:

We create a box where we want to show all the icons in the HTML.

In the CSS3, we use simple web-kit transitions on mouse hover with the help of

to zoom in and out. We generate the icons from the foundation css using the file foundation-icons.css where we have code for each icons.

DEMO | DOWNLOAD

Hope you enjoyed this simple tutorial. Please let us know your suggestions and comments below.



, ,

Comments are closed.