Home / Articles / Programming languages / Markup languages / HTML & CSS / Social media icons with animated tooltips using only CSS3

Social media icons with animated tooltips using only CSS3

Social media icons with animated tooltips 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 explains how create social media icons with animated tooltips without JavaScript using only CSS3.

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

Social media icons have the following HTML structure: every social media icon is a link with two images inside and all these links are located in the same span element. The first image in a link 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).

HTML code for five social media icons:

<span>
  <a href="#" data-icon-text="Yahoo"><img src="bw-yahoo.png" alt=""><img src="yahoo.png" alt=""></a>
  <a href="#" data-icon-text="WordPress"><img src="bw-wordpress.png" alt=""><img src="wordpress.png" alt=""></a>
  <a href="#" data-icon-text="Vimeo"><img src="bw-vimeo.png" alt=""><img src="vimeo.png" alt=""></a>
  <a href="#" data-icon-text="Twitter"><img src="bw-twitter.png" alt=""><img src="twitter.png" alt=""></a>
  <a href="#" data-icon-text="Tumblr"><img src="bw-tumblr.png" alt=""><img src="tumblr.png" alt=""></a>
</span>

By default inside of each link the first image is hidden and only the second one is visible. When user hovers the cursor over any icon, inside of all icons the first image appears and the second one disappears except the current icon which is hovered by the user. For the hovered icon everything stays the same, only one thing changes - a tooltip of the current icon becomes visible.

All operations with appearing and disappearing images and tooltips are accompanied with smooth animations using CSS property transition.

Operating principle for a tooltip of each social media icon is almost the same as described in the following article: How to create a simple tooltip using only CSS3.

In the HTML code above the only thing you need to be aware of is attribute data-icon-text which is present in a link of each icon. This attribute sets the text for a tooltip of the current icon and can be changed to any other text.

CSS code:

a img {
  display: block;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: none;
}

a {
  position: relative;
  display: block;
  float: left;
  padding: 0 5px 5px 0;
  text-decoration: none;
}

a:before {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  color: #FFFFFF;
  content: attr(data-icon-text);
  display: block;
  left: 20%;
  opacity: 0;
  padding: 2px 5px;
  top: 0;
  white-space: nowrap;
  z-index: 10;
}

a,
a:before {
  -webkit-transition: all linear 300ms;
  -moz-transition: all linear 300ms;
  -o-transition: all linear 300ms;
  transition: all linear 300ms;
}

a:hover:before {
  opacity: 1;
  top: -20%;
}

span:hover a {
  opacity: 0.35;
}

span a:hover {
  opacity: 1;
}

a img:first-child,
span:hover a img:first-child + img,
span:hover a:hover img:first-child {
  display: none;
}

span:hover a img:first-child,
span:hover a:hover img:first-child + img {
  display: block;
}

Live demo

The following archive contains the example above:


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation