How can I make a freeze effect for my social icons in css?

Question

I want to create a simple hover effect, I have a gray facebook, twitter and youtube image, and when it is hovering, I want to get the original color from social networks, that’s all I want.

This is my html.

<div class="social-top"> <ul> <li><a href=""><img src="images/social/fb.png"></a></li> <li><a href=""><img src="images/social/twitter.png"></a></li> <li><a href=""><img src="images/social/yt.png"></a></li> </ul> </div> 

This is my css.

 .social-top { width: 150px; padding-left: 650px; } .social-top li { display: inline-block; width: 40px; } .social-top a { display: block; overflow: hidden; height: 30px; position: absolute; } .social-top a:hover { top: 30px; } 

And here is a site that has the effect I want:

http://lalomacd.com.mx/2013/

Sincerely.

Answer 1

This is how you do it. You can place a transparent PNG here for your links, not text if you want. Or you can check out the use of some font icon libraries that use text to create a social media icon for you. For example, check out Fontello. http://fontello.com/

Here is the code I wrote for your effect:

  <div class="social-top"> <ul> <li class="facebook"><a href="#self">F</a></li> <li class="twitter"><a href="#self">T</a></li> <li class="youtube"><a href="#self">YT</a></li> </ul> </div> .social-top { float: right; } .social-top li { display: inline-block; width: 40px; height: 40px; background-color: #ccc; border-radius: 150px; } .social-top li.facebook:hover { background-color: #006; } .social-top li.twitter:hover { background-color: #060; } .social-top li.youtube:hover { background-color: #600; } .social-top li:hover a { color: #fff; } .social-top a { display: block; line-height: 40px; text-align: center; width: 100%; height: 100%; } 

Here's a link to the js fiddle: http://jsfiddle.net/eNU8H/

Answer 2

instead of using img tags, create div tags and set their background image to social icons and hover over them

Answer 3

According to the site you indicated, they just made an image with two desired images.

And in hover mode, they just change the back position.

Example:

 .srss{ background-image:url(images/rss-icon.png); background-position:bottom; } .srss:hover{ background-position:top; } 

With HTML according to this:

Using an image like this

  <a href="http://lalomacd.com.mx/2013/feed/" target="blank"><img class="srss" src="http://lalomacd.com.mx/2013/wp-content/themes/laloma-theme-second/images/blank.png" alt=""></a> 

All this can be obtained directly from the site viewing the source and css

Of course, this is not the only way, you can change the background image instead of the background position, but all this corresponds to the way you like it most

Answer 4

They just use image sprites. Set the background image to the path to the sprite. In normal mode, set the background position to see a dark icon. In freeze mode, change the position of the background to part of the sprite using the colored icon.

Answer 5

You can also check out http://perfecticons.com . There are some freezing effects.