How to add hover over effects for social media icons, menus and more – Basics of HTML #3

Many blogs and websites, including my own, feature “hover over” effects on images where the image changes somehow when the mouse hovers over it. “Hover over” can also be referred to as rollover or mouseover. Usually, javascript coding is used to create this effect but there are some easier and more efficient alternatives. I’ve mentioned method 1 in previous tutorials but I thought I should dedicate a post to it and show you how to work with this technique to add some cool features to your blog – use it on any images such as your header, social media icons, post images, etc.

Create your Images

First thing you need to do is create your images, I recommend GIMP which is a free alternative to Photoshop. Create one and duplicate it. On the duplicate you can change the colour, add something extra or whatever you want. I will recommend keeping them both the same size as it just works better. If using method 2 you will also need to create a third blank image, in this image add your original two images. Place the image you want to appear first on the bottom and the hover over image on top.

hover-over-effects-on-images

Hover over effect method 1

You can add this to a blog post, page or gadget on your blog. For the gadget, go to Layout > Add HTML/Javascript Gadget and paste it there. For a post or page, create new and hit the HTML tab instead of compose mode, then paste the code. Fill in your own details.

<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE">
<img src="DIRECT URL OF IMAGE" border="0" onmouseover="this.src='DIRECT URL OF SECOND IMAGE WHEN HOVERED OVER'" onmouseout="this.src='DIRECT URL OF IMAGE'" />
</a>

Hover over effect method 2

Method 2 uses only CSS code. It is popular because we only use one image (image #3 from above example) meaning it loads faster.

  1. Add the following HTML to your blog. You can add it to a blog post, your HTML Template or a HTML gadget. If using multiple images add it multiple times. Instead of hoverexample you could use twitterimage, facebooklink or whatever you want as long as it is the same as the CSS we will add below.
    <a class="hoverexample" href="WEBSITE URL">Title of Link</a>
  2. Now we need to add CSS code to your blog. In Blogger, go to Template > Customise > Advanced > Add CSS. In WordPress, add the following to your themes stylesheet.
    .hoverexample {
    display: block;
    float: left;
    width: 150px; /* adjust this depending on your image */
    height: 70px; /* adjust this depending on your individual images */
    background: url('DIRECT IMG URL OF THIRD IMAGE CREATED') bottom;
    text-indent: -99999px;
    margin-right: 5px; /* adjust for spacing between icons */
    }
    
    .hoverexample:hover {
    background-position: 0 0;
    }
    

    If using multiple images (such as social media icons), you’ll need to add this code for each image/icon changing .hoverexample and .hoverexample:hover for each. You could use .twitterimage, .facebooklink or whatever you want as long as it is the same as the HTML class we already added.

The Results of Method 1 and 2


“Fall in” Hover Over Effect

A cool extra effect which “rolls” the image in so it looks like it falls down or drops from above. Use method 2 and then add the following below margin-right: 5px; and before }

-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;

so it looks like this

.hoverexample {
display: block;
width: 100px; /* adjust this depending on your image */
height: 100px; /* adjust this depending on your individual images (#1 and #2) */
background: url('DIRECT URL HERE') bottom;
text-indent: -99999px;
margin-right: 5px; /* adjust for spacing between icons */
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}

.hoverexample:hover {
background-position: 0 0;
}

The Result

Show me what you’ve created

Theres loads of ways to use this effect and so much you can do with it, if you do use it let me know. I’d love to see it.

Premade Social Media Icons
How to Add Social Media Icons to Your Blog

Post last updated:

35 responses to “How to add hover over effects for social media icons, menus and more – Basics of HTML #3”

  1. Always love your posts, they’re a great tool for bloggers!

    1. Thanks lovely 🙂 have so many great posts I want to do, just not enough time to write them at the moment lol hope you’re well xx

  2. Ellie, your tutorials are so good.. thanks! This is the type of detail that I see on another blogs and I love.

    I did the “fall in” effect in my blog. I put on the sidebar the same icons that I got on the top of the blog to make it more visible an accesible.
    At first the tutorial seems easy but it takes me a lot of time because in some icons when the mouse hovers over it the image moves a litle to the right, didn’t fall exactly in the same place. After several trials I got it (more or less) but the icons are not aligned perfectly…Except for it, I love it:)

    I’d love you to take a loof at the result and also let me know if you think that the sidebar have too much gadgets. I like simple design but I think all the items in the sidebar are practicall.

    Thanks and excuse my horrible english!! xx

    1. Hello, sorry about the delay in replying to you. Thank you so much, I’m glad you like the tutorials. I’ve had a look and they look great, the issue your having with the alignment is down to the images themselves. When creating the stacked image, the icons need to be EXACTLY one under the other. I notice with your Bloglovin one the icon on the bottom is shifted a little the the left, which is why it “moved” when it falls.

      Your sidebar is great, it has the main things needed, very practical! If I was going to remove anything it would be the archive or latest comments, but it doesn’t look too cluttered as it is. I love simple design too 🙂 your blog looks great. Just on thing – have a look at your blog post dates, the month is coming out of the circle. You could change the date format in settings or make the circle bigger. Hope this helps x

      1. Thanks! Don’t worry about the delay. When I’ll have some time I will make again the images to make them fix perfect.
        I’m looking what you said about the post dates but I don’t see the month coming out. In fact the font of the month is very small, there is free space by the sides yet….I can make the circle bigger anyway

        Thanks for your opinion, I had absolutely no idea about blogs, templates or design and step by step and reading tutorials I have now a blog design that in general I like. I know there are things more beautifull but they don’t fit with my theme..

        xx

        1. Just realised it’s only when Google Translate automatically translates your blog for me that the date appears to be out of the circle, otherwise it’s perfect 🙂 sorry about that. Thats brilliant, that’s how I started too 🙂

  3. Jana

    Ellie, your tutorials are so well laid out and easy to follow! Thank you so much for sharing.

    I just used this for my social media icons. Check it out! 🙂 http://www.lifecouldbeadreamblog.com

    1. Thank you 🙂 they look lovely! x

  4. is that css scrip only works for wordpress?? i’ve tried using it on my blogspot but fail .__.
    help! 🙂

    1. No, it can be used on any website. First make sure to create both icons stacked on top of one another in one image as shown. Add the class to the link, then add the CSS using the same class. Alter the width, height, background and margin values 🙂

  5. Thank you for the tutorial. I just added these on my blog! Loving them.

    1. No problem, they look great!

  6. I love love love these! Used these for sorting my labels in my sidebar and looks great. I’d love for you to check mine out at http://www.inkstruck.com . Hope you like it! 🙂 Have a nice day.

    1. Great blog! You’re so talented!

      1. Thanks kindly Ellie! 🙂

  7. I need your help! 😮

    i used the html and css from your tutorial on my old blog and it works…
    but it didn’t work for the blog i run now ..

    here’s my example blog (http://imyasinabdillah.blogspot.com/)..
    i place the social icons above the gadget. please check it and help me out..

    if you don’t mind, may i have the html/script copy of the above ‘pink twitter hover icon exemplar’? please? i just to try to put it on my blog to test if the problem is in the coding or my blog’s whole template html…

    sorry for my poor grammar. ._.”

    1. Hello, I don’t see any social icons or any of the code on your blog so I can’t check your template for anything that may be conflicting.

      1. the icon won’t show 🙁 only ‘Facebook’ text link showed… :/

        1. It’s not connecting your CSS for some reason, I can’t tell from here. If you want to add ****@gmail.com to your blog permissions under settings, I can take a closer look for you.

          1. Now the problem is that the Icons effect the nav-bar/menus and somehow it can’t be clicked 🙁

          2. Your main content area is sitting on top of them because of padding you’ve added. Find .main-inner and change padding-top: 35px; to margin-top: 35px;

  8. Yasin

    damn it’s not working again.. i find a lot of .main-inner and i changed the one under /*Post——– */ the margin did changed but it didn’t make the menu’s click-able/working 🙁

    1. You’ll need to change them all or put it just before ]]> </b:skin>. CSS stands for Cascading Stylesheet which means the browser reads it from top to bottom so if you have multiples, the one further down may be over-riding the one you changed.

  9. Hi Ellie,
    Thank you so much for posting this. Your tutorial was really clear and easy to understand. I’m in the process of customizing my blog right now and this definitely helped me a lot. Really love your blog 🙂

    1. Thank you Samantha! 🙂

  10. I’ve tried so many tutorials and only yours works! Thank you 🙂

    I’m getting an underline between each of my icons on hover, any ideas why and how to get rid of it please?

    Thanks 🙂 xx

    1. Hello Sarah, adding the following code should remove the underline for you a:hover { text-decoration:none;}

  11. Hi there, great tutorials!

    I added this code to my sidebar, but it looks like there is a space between each image causing a small bar to appear between those images when I hover. Do you know how to delete that? I tried removing any gaps in html.

    THanks!

  12. Erika

    Hi Ellie, this tutorial worked perfectly for me. Thanks! I do have a few questions though, I’ve got these icons on my sidebar and this is happening: http://i62.tinypic.com/2cf7f69.png

    Any idea how to add more space below to icons? I also wanted to know if there was a way I could center them?

    1. Use the wrapped div to center them as shown at the end of this tutorial, you can also add a padding value in CSS to space them out.

  13. Hello, How can I get a hover effect on to my navigation bar content. At the moment they just disappear when I place my mouse on top of the titles.

    1. Hello, you should be able to change it in the Template Designer (Template > Customise > Advanced)

    2. Hello, it depends on the navigation you are using but you should be able to change it in the Template Designer (Template > Customise > Advanced)

      1. Hi, I couldn’t find anything to change that.

        1. I got it 🙂

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.