Home / Articles / Programming languages / Markup languages / HTML & CSS / Social media icons with fade in and out animation using only CSS3

Social media icons with fade in and out animation using only CSS3

Authors: Sergey Fedus

Currently 0 out of 5 Stars.
1
2
3
4
5

Rating: 0/5 (0 votes cast)

Feb 23th 2014 02:59 pm 42232319 03606

This article demonstrates how to simply create fade in and out animation using only CSS3 for social media icons.

Images for social media icons used in this article were found in Internet as free icons and used only for demonstration purposes. They can be replaced with any other icons.

HTML structure is the following: every social media icon is a link with two images inside. The first image is black and white version of the icon. The second one is color version of the icon. So, if you are going to use your own images as icons, you will need to make two versions (black and white version and color version). In order to do this you can use any software for processing images (graphics editor). Also all images for all icons must have the same sizes.

HTML code for five social media icons:

<a href="#"><img src="bw-yahoo.png" alt=""><img src="yahoo.png" alt=""></a>
<a href="#"><img src="bw-wordpress.png" alt=""><img src="wordpress.png" alt=""></a>
<a href="#"><img src="bw-vimeo.png" alt=""><img src="vimeo.png" alt=""></a>
<a href="#"><img src="bw-twitter.png" alt=""><img src="twitter.png" alt=""></a>
<a href="#"><img src="bw-tumblr.png" alt=""><img src="tumblr.png" alt=""></a>

Inside of each link, by default the second image is transparent, so only the first image can be seen which is actually black and white version of the icon. When user hovers the cursor over the icon, the second image becomes non-transparent and overlays the first one. This is achieved by changing the value of CSS property opacity for the second image, but when used together with CSS property transition, it changes its value gradually making simple fading animation.

CSS code:

a {
  width: 64px;
  height: 64px;
  position: relative;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a img {
  border: none;
  display: block;
  filter: alpha(opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a img:first-child,
a:hover img:first-child + img {
  opacity: 1;
  filter: alpha(opacity=100);
}

a:hover {
  -webkit-box-shadow: 0 0 6px #000000;
  -moz-box-shadow: 0 0 6px #000000;
  box-shadow: 0 0 6px #000000;
}

In the styles above only two things should be taken into the consideration:

width: 64px; which value must be the same as the image width used for the icon;
height: 64px; which value must be the same as the image height used for the icon.

You will need to change values for these two properties in case you are going to use other images for social media icons which have different sizes than ones used in this article (64x64 pixels).

Live demo

The following archive contains the example above: