Home / Articles / Programming languages / Markup languages / HTML & CSS / Social media icons with slide up and down animation using only CSS3

Social media icons with slide up and down animation using only CSS3

Social media icons with slide up and down animation using only CSS3
 
Social media icons with slide up and down animation using only CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article demonstrates how simple it is to create slide up and down animation for social media icons using only CSS3.

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.

Let's start with HTML structure. Each 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.

Here is an example of 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>

By default, inside of each link, the second image is hidden to show only the first image which is actually black and white version of the icon. When a user hovers the cursor over the icon, the first image disappears and the second one appears. This is achieved by changing the value of CSS property margin-top for the first image. It switches between two images of the icon, but using it together with CSS property transition makes a nice animation.

Here is the CSS code:

a {
  overflow: hidden;
  height: 64px;
  -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;
}

a img:first-child {
  margin-top: 0;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a:hover img:first-child {
  margin-top: -64px;
}

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:

  • height: 64px; which value must be the same as the image height used for the icon;
  • margin-top: -64px; which value must be the same as the image height used for the icon, but with negative value.

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:


 

Read also

Animation in CSS3

Animation in CSS3

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation