 |
| social icon/hover effect |
Many blogs have dynamic social media icons with beautiful hover effects. However, most of them are JavaScript or jQuery and hence they slow the blog down. This tutorial will teach you how to add cool hover effect to ANY social media icons (images) using CSS3.
Update: Have you seen images that rotate when you hover on them,
and come back to the original position the moment you take the cursor
away!? Wanna know how they do it? - Check it out!
Steps to implement:
1. Here is the CSS code that we are going to use:
<style>
.techsperiahover img {
opacity: 0.6;
}
.techsperiahover img:hover {
opacity: 1;
}
</style>
<div class='techsperiahover'>
<a href="Social Link"><img src="Enter Icon URL"/></a>
<!-- You can add as many as <a> tags as you want -->
</div>
2. You're done! Replace the code highlighted in blue with the respective links. [Note: "Icon URL" means URL of your icon's image.]
What? That's it!?
Yeah yeah, I know. For those of you who don't know HTML and CSS, you didn't get a thing, did ya?
Let me show you a few examples. [If you want the same icons that I used, simply copy the code given below them.]
live demo:
Metro-Style Social Media Icons With Hover Effect:
<style>
.techsperiahover img {
opacity: 0.6;
}
.techsperiahover img:hover {
opacity: 1;
}
</style>
<div class='techsperiahover'>
<a title="RSS Feed" href="http://feeds.feedburner.com/#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUQkDGEpCxEhYDGYLHLFDoEKMARkxUSwuAVRHoEz6vwrDgbcrtTlMNJ9rYpmbw1DBN7K7Eg40_yKzD8QvWA8plzKojf55oDfWteRmmypjkQbJmE4JURmUa9QTFy4NAM3B2sR29U41tBQ/s32/Rss-Feed-Metro-32.png"/></a>
<a title="Twitter" href="http://twitter.com/#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBStbBOt_YoZqCh99AaD8bmTi-Y3Q1M_SHqj8nvKzTbcA4mQb-qaUPLHVrQ1lZf8_wEbPulKXZqRM2gaMNvK7WFZde8Nb-cD8AJw7KqUEMyO_zH9u-RDeIyCZlN5YY03EtolR1rnueRE/s32/twitter-bird-white-on-blue.png"/></a>
<a title="Facebook Page" href="http://www.facebook.com/#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51nHX1n2E6BDOdsfpBhMj7Cwu6edFCVLMX0U2N0pSCsU1RNUMuqb3PXvfiVqE-UU46zl-5iLtKuohEwmh889BtHB0KWB-5C60wNGaFdiQxCIkYB_YmaYANTSMI2REbhFzzUtBX6jcXks/s32/Facebook-F-Metro-32.png"/></a>
<a title="Google Plus" href="https://plus.google.com/#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQl4AtGo3BsbRtqxKjV1UdtIA83Z5EwvJCSp8OgkNluy1It8_BIr5tKmNXe7jz7vlt0WvK_hsv6P6FdypJ0RynirjB-a0tXXWmmSI_Ocu5yxA7tPXsr7aJl_kVZSrJ57-1Wh7o7iAYIY/s32/Google%252B-Alt-Metro-32.png"></a>
<a title="YouTube Channel" href="https://www.youtube.com/#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr7E_NjUyh5y-eQhNE48fJUAo0UB0t8lAEkvKDLR4hddxQgQg6Qwul9gGImHI0ejCKijL9bCnSc2KPE62pOx0I9hbjAb5rjN1Y1OhRaPyRgXCk7cUTCJBwQYl2xUT0FJxY-K9mhhJ-2vs/s32/Youtube-Red-Metro-32.png"/></a>
<a title="Email Feed" href="http://feedburner.google.com/fb/a/mailverify?uri=#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJlAUGRTDAxYVJ-w6CNX9nWJmztEJ53V7jSdt7QJi6LjQGvwSM3lgotD5gofqej1hb-oqpZf_bmzE65zSaHk3saAJ2kVCGgzgZvHEjS8i3pv8RBp0V7jw76GiLmjYqn5d7gP56N0XN-78/s32/Live-Hotmail-Metro-32.png"/></a>
</div>
Round Social Icons With Hover Effect:
Round Icons Code:
Replace the code highlighted in blue with your respective links.<style>
.techsperiahover img {
opacity: 0.6;
}
.techsperiahover img:hover {
opacity: 1;
}
</style>
<div class="techsperiahover">
<a href="http://feeds.feedburner.com/#" target="_blank" title="RSS Feed"><img src="https://lh6.googleusercontent.com/-VNHOvJFB1zc/UgvDEmLAZWI/AAAAAAAABmk/qPXRGxRfGt4/s64/rss-round-64.png" /></a>
<a href="http://twitter.com/#" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsg5dYaWx7cDLbXq5i_zH7CBk5LsFqDUoh2OJME1x53QjwY76fVyd4TM1641tvnfvmrkDW2btFHrZG1KXjo5Bk80mqrNEF6uvi5CynDS2hgsX0HnjqZdsXaeW1oP9E3YgoIjY6IGj-d-0/s64/twitter-round-64.png" /></a>
<a href="http://www.facebook.com/#" target="_blank" title="Facebook Page"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtI8xjb7W-A3p1G3mQFyATGDW6yqHeYej9paxMEqHi84WqJ8pntThaSTyKvTCeIccnvJyFB3f43gCs8Cj66_akrhChquVgNEFhMmhh_HaIiyfxz9HwOdlyIzd6azukQdSXuLY6f_1-vOI/s64/facebook-round-64.png" /></a>
<a href="https://plus.google.com/#" target="_blank" title="Google Plus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggx2QKL_xHEj3X4_4G2j1Ie3BJAkDvpFk3hMwMxaxn96XwzDpmsLjEu_uxq33HJXGU__JXPVZtAF8XgZr0qWdBJehV6k87A5hAd9Gat8T6lppH9k0LBSSVB3rar3eXR7TtIadAWQ_ZB7E/s64/google_plus-round-64.png" /></a>
<a href="https://www.youtube.com/#" target="_blank" title="YouTube Channel"><img src="https://lh5.googleusercontent.com/-UTQdW_pEhEU/UgvDEmajPCI/AAAAAAAABmo/hQdiUfXsptY/s64/youtube-round-64.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=#" target="_blank" title="Email Feed"><img src="https://lh3.googleusercontent.com/-oNl7NXOR5TE/UgvDEgvNRzI/AAAAAAAABmw/hrZttStpctM/s64/email-round-64.png" /></a>
</div>
If you are new to Blogger and don't know where to add this code, see How To Add A Gadget/Widget To Your Blogger Blog.
0 comments:
Post a Comment