Làm social icon với hiệu ứng hover tooltips bằng CSS 3

• 07-09-2015 21:58:14
• by:

Chỉ với CSS 3 bạn sẽ có một bộ social icon có hiệu ứng hover tooltips tuyệt đẹp gồm gần 20 mạng xã hội.

Hôm nay, baobinh.net xin chia sẻ với các bạn bộ social với hiệu ứng hover tooltips tuyệt đẹp chỉ cần dùng CSS3. Hiệu ứng này khá đơn giản, chỉ cần 2 phần là HTML và CSS. Sau đây chúng ta sẽ cùng đi tới phần code:

1. Code HTML

<div class="element" >
    <span>
	<a href="#" data-icon-text="Yahoo"><img src="images/bw-yahoo.png" alt=""><img src="images/yahoo.png" alt=""></a>
	<a href="#" data-icon-text="WordPress"><img src="images/bw-wordpress.png" alt=""><img src="images/wordpress.png" alt=""></a>
	<a href="#" data-icon-text="Vimeo"><img src="images/bw-vimeo.png" alt=""><img src="images/vimeo.png" alt=""></a>
	<a href="#" data-icon-text="Twitter"><img src="images/bw-twitter.png" alt=""><img src="images/twitter.png" alt=""></a>
	<a href="#" data-icon-text="Tumblr"><img src="images/bw-tumblr.png" alt=""><img src="images/tumblr.png" alt=""></a>
	<a href="#" data-icon-text="StumbleUpon"><img src="images/bw-stumbleupon.png" alt=""><img src="images/stumbleupon.png" alt=""></a>
	<a href="#" data-icon-text="Skype"><img src="images/bw-skype.png" alt=""><img src="images/skype.png" alt=""></a>
	<a href="#" data-icon-text="RSS"><img src="images/bw-rss.png" alt=""><img src="images/rss.png" alt=""></a>
	<a href="#" data-icon-text="Pinterest"><img src="images/bw-pinterest.png" alt=""><img src="images/pinterest.png" alt=""></a>
	<a href="#" data-icon-text="PayPal"><img src="images/bw-paypal.png" alt=""><img src="images/paypal.png" alt=""></a>
	<a href="#" data-icon-text="Myspace"><img src="images/bw-myspace.png" alt=""><img src="images/myspace.png" alt=""></a>
	<a href="#" data-icon-text="LinkedIn"><img src="images/bw-linkedin.png" alt=""><img src="images/linkedin.png" alt=""></a>
	<a href="#" data-icon-text="Instagram"><img src="images/bw-instagram.png" alt=""><img src="images/instagram.png" alt=""></a>
	<a href="#" data-icon-text="Google+"><img src="images/bw-googleplus.png" alt=""><img src="images/googleplus.png" alt=""></a>
	<a href="#" data-icon-text="Flickr"><img src="images/bw-flickr.png" alt=""><img src="images/flickr.png" alt=""></a>
	<a href="#" data-icon-text="Facebook"><img src="images/bw-facebook.png" alt=""><img src="images/facebook.png" alt=""></a>
	<a href="#" data-icon-text="Dropbox"><img src="images/bw-dropbox.png" alt=""><img src="images/dropbox.png" alt=""></a>
	<a href="#" data-icon-text="Dribbble"><img src="images/bw-dribbble.png" alt=""><img src="images/dribbble.png" alt=""></a>
	<a href="#" data-icon-text="Digg"><img src="images/bw-digg.png" alt=""><img src="images/digg.png" alt=""></a>
	<a href="#" data-icon-text="deviantART"><img src="images/bw-deviantart.png" alt=""><img src="images/deviantart.png" alt=""></a>
	<a href="#" data-icon-text="Blogger"><img src="images/bw-blogger.png" alt=""><img src="images/blogger.png" alt=""></a>
	<a href="#" data-icon-text="YouTube"><img src="images/bw-youtube.png" alt=""><img src="images/youtube.png" alt=""></a>
	<a href="#" data-icon-text="YouTube 2"><img src="images/bw-youtube-2.png" alt=""><img src="images/youtube-2.png" alt=""></a>
	<a href="#" data-icon-text="Behance"><img src="images/bw-behance.png" alt=""><img src="images/behance.png" alt=""></a>
    </span>
</div>

2. Code CSS

.element {
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	width: 100%;
	
}

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;
}

Vậy là các bạn đã hoàn thành xong hệ thống gần 20 social icon với hiệu ứng hover tooltips tuyệt đẹp.

Download file code mẫu tại đây
Mật khẩu: baobinh.net

Xem demo tại đây

---

• Posted by
• 2015-09-07 21:58:14