Adding Social Icons with Hover Effect
facebook

This is a simple tutorial to demonstrate how to add icons or any other images to your site and give them a hover effect. These can be added to your header, footer, in a spot above your pages, or within a text widget in any sidebar area. Here are the steps. This tutorial is designed especially for those using Artisteer 3 generated themes.

What You’ll Need

1. Images to use (unless you create your own).
2. Image editing software such as Photoshop or Gimp (May not be necessary. See details below.)
3. An active WordPress installation and access to your theme’s image folder.

Steps

1. Create your images.

  • Use free downloadable icons or create your own icons to use.
  • If you want your icons to be in a different color, have a shadow, or another special feature, you’ll need to create an image that has the regular icon with the edited icon sitting directly above it. So, if your icon is 30px by 30px, your newly edited image should be 30px wide and 60px tall making space for both images. (The image to the right has a background style in the post, but the original image has no space around the icons at all.)
  • Follow the steps above for every individual icon and save them as jpg, png, or gif files with names that match what they are.
  • If you just want your images to change position (like bounce up when hovered over), you can skip the last two steps and just do the first.

2. Add the necessary divs to your header or text widget

  • Open up your header.php file or the text widget that you’d like to add your images to. If in the header, add this code directly above the logo code.
  • <div class="social-wrapper">
    <div class="facebook"><a href="url-to-facebook-here" title="Facebook" target="blank"></a></div>
    <div class="twitter"><a href="url-to-twitter-here" title="Twitter" target="blank"></a></div>
    <div class="rss"><a href="url-to-feed-here" title="Subscribe to Posts" target="blank"></a></div>
    </div>
    
  • Add as many lines as necessary depending upon how many icons you have. Just be sure to change the class name, the url, and the title for each.
  • Upload your image files to your theme’s image folder.

3. Add the style to your css file.

  • Now, you’ll want to do is to determine the size and position you want your icons to be in. To figure out how much width you’ll need, just multiply the width of an individual icon (plus a couple of pixels for padding) by the amount of icons you have. That will be the width of your wrapper. The height of the wrapper will be the exact height of one of your finished social icon images. (In the example above, it would be 60px.)
  • Open up your style.css file, and add the following code:
  • div.social-wrapper
    {
      position: absolute;
      display: block;
      width: 96px;
      height: 30px;
      top: 20px; (your images will float 20px below the top of the header.)
      right: 0; (your images will be on the right side of your header.)
      overflow: hidden;
    }
    
    .facebook a
    {
      position: absolute;
      height: 60px;
      width: 30px;
      top: 0; (The top image from the one you created will appear.)
      left: 0;
      background-image: url('images/facebook.png'); (your actual image file name should be here.)
      background-repeat: no-repeat;
    }
    
    .facebook a:hover
    {  
      top:-30px; (The bottom image from the one you created will appear.)
    }
    
    .twitter a
    {
      position: absolute;
      height: 60px;
      width: 30px;
      top: 0;
      left: 32px;
      background-image: url('images/twitter.png');
      background-repeat: no-repeat;
    }
    
    .twitter a:hover
    {
      top:-30px;
    }
    
  • Notice that the only changes for the twitter code was the name, the position from the left, and image file name. Just continue to use the same code structure for as many icons as you have continuing to scoot each one a little further over from the left than the one before. Also, be sure the name given here matches the class exactly that you added in the header.
  • Update your style sheet and view your changes. You may need to tweak the margins slightly to position your items exactly where you need them.

Note: If you don’t have access to your theme’s image folder, simply upload your images to somewhere else online and include the full image url between the quotation marks of the background-image url.

Other Suggestions

  • Background Colors or Borders: You don’t need to edit an image at all if you want to simply add a different background color or border to it. If you did that, the code might look like the following:
  • .twitter a
    {
      position: absolute;
      padding: 5px;
      height: 30px;
      width: 30px;
      top: 0;
      left: 32px;
      background-color: none;
      border: none;
    }
    
    .twitter a:hover
    {
      background-color: #cccccc; (Adds a grey background.)
      border: 1px solid #cdcdcd; (Adds a darker grey border.)
    }
    
  • If you mess with background colors, you’ll need to be sure you have a padding around your image to be able to see it. Also, make sure that your heights listed are identical in both the wrapper and the images themselves, and that the top margin is the same for all of the images.
  • Transparency Settings: You could also add an opacity filter to it. To view an example of what an opacity filter does, you can see the images in my Portfolio. The passive images have an opacity of 50% set, and the hovered images have an opacity of 100%.

I hope that helps. Let me know if you have any comments or questions, and if you want to see a simple tutorial on setting the opacity, check out css-tricks.com.

© 2011, reflectingthedesigner.com. All rights reserved.

Mathias
May 29th, 2012 at 5:20 pm

Hi Sarah

Thanks for the great tutorial. I followed all the steps, but I have some trouble with adding the divs to the text widget. May I just add the divs-code in the WP-Backend or do I have to tweak some text files?

Thanks a lot in advance for your help!

Best regards,
Math

June 6th, 2012 at 7:32 pm

Adding the div codes works best in the header.php file itself rather than just adding to a text widget, however, you can add the divs within the text widget. You’ll still need to add the style css that matches the div class names within the actual css as well.

May 29th, 2012 at 6:00 pm

Again: Thanks for the great tutorial. I could solve the problem above. Was just inaccuracy in coding…

But now my button images are displayed as a whole – hovering or not. It seems as if the div would not prevent showing the whole image.

Do you have a clue?

Thanks in advance and best regards,
Math

May 31st, 2012 at 8:28 am

your height for the wrapper needs to be only has high as the top half of the image. You also should have overflow:hidden; set so that only that top half appears. For each actual icon, you need to have the entire height of the image listed accurately and the position set accordingly from the top so that the correct portion of the image appears when passive and hovered.

Martin Rowan
September 24th, 2012 at 1:17 am

Hi

Thanks for this, but have you actually tested it to see if the code works? I just copied the code and made sure the icons are exactly 30 and 60 height etc, but doesn’t matter what I do it just seems to jump and down:s

Martin Rowan
September 24th, 2012 at 1:29 am

sorted! I had to add overflow:hidden!important; for some reason it kept taking it out, but then all of a sudden it worked.., Thanks! :)

October 9th, 2012 at 9:07 pm

It may have just been a caching issue. Glad you got it figure out.

January 4th, 2013 at 10:57 pm

Excellent post. I was able to complete this successfully thanks to you. It’s very much appreciated!

Adam
March 7th, 2013 at 10:15 am

Hello Sarah

so i have this link button

<?php previous_post_link('%link',''); ?>`

how i can add hover text to this button ? just to show simple text on mouse hover like “older post”

Thanks in advance

Adam
March 7th, 2013 at 10:17 am

reposting the code again .. for some reason it didn’t show up, sorry about that

`<?php previous_post_link('%link’,”); ?>`

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree