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

hover-over-effects-for-social-media-icons-images

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

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

35 comments

  1. Beauty Positive on

    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

    Reply
    • Ellie M on

      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

      Reply
      • Beauty Positive on

        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

        Reply
        • Ellie M on

          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 ๐Ÿ™‚

          Reply
    • Ellie M on

      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 ๐Ÿ™‚

      Reply
  2. Yasin on

    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. ._.”

    Reply
  3. Yasin on

    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 ๐Ÿ™

    Reply
    • Ellie M on

      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.

      Reply
  4. Samantha Lo on

    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 ๐Ÿ™‚

    Reply
  5. Sarah on

    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

    Reply
  6. Jessica on

    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!

    Reply