• WE HELP PEOPLE FOLLOW THEIR DREAMS
    AND CREATE ONLINE SPACES THAT IMPACT THEIR COMMUNITIES.

    we teach, empower and support DIYers to get started with WordPress,
    seasoned business owners learn and revamp their online presence
    and craft completely custom designed online spaces for anyone in between.

     

    CONTACT US
  • Creating a rollover hover image effect in WordPress can sometimes be the little something extra that makes your website pop. What is it, exactly? Well, you have an image on your webpage, and your user puts their mouse over it, and viola – new image shows up. As per below.

    It’s actually pretty simple to do this, so follow the steps below to get your image rollover effect in your own WordPress blog with just a little bit of code.

    1. Make your images.

    If you’re creating a hover effect in which only one part of your image changes, be sure to create it in Photoshop or another program that will allow you to change only one part of the image so the effect is really clear.

    1. Open a new browser window and upload both images into your media library in WordPress.
    2. Create or Edit your Post or Page in WordPress.
    3. Choose “Text” to edit the code directly on the page.
    4. Enter the following code where you would like your image rollover to show up.

    Enter the code below onto your website

    <a href="ENTER URL ADDRESS HERE"><img src="FIRST IMAGE URL GOES HERE" onmouseover="this.src='SECOND IMAGE URL GOES HERE'" onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" /></a>
    
    1. Change the parts of the code with your URLs of your images and where you want the image to be linked to.
    2. You’re done!

    Be careful if you need to edit your image after you’ve pasted it in the code. To edit in the future, make sure you’re always editing the “Text” portion of your WordPress page or post.

    PS. Where are you using the image hover rollover?

    I totally wanna see! Comment below with your site address or the site that you created the image for, and share them with the world! 😉

    60 COMMENTS

    • benjaminwayman says:

      Hi, I tries this and all I got was the php text and an unloaded image icon. What am I doing wrong?

      • Emilia Farrace says:

        Hi, can you show me the code you’re using? Have you added the images to your website?

      • Emilia Farrace says:

        I think there was an error in the code formatting above when copying-pasting. It’s all been fixed now. So if you copy the code within the code box with your information, this should work out. Let me know if it does/doesn’t and thanks for commenting! 🙂

    • benjaminwayman says:

      Ive just noticed the code I pasted here (which is the same code you offered above) is displayed as blank between the two [php] tags. This is also what appeared on my webpage.

    • Emilia Farrace says:

      I’ve sent you an email!

    • Matthijs Kooi says:

      This is so weird, when i try to add the code and it gets to long, more then halv of the code just suddenly disapears, driving me crazy, anny idea what it could be ?

    • […] are like that. Anyway, if you want to learn how to do this easy rollover trick, please do visit Taylor for the code, it’s super simple, pinky […]

    • Tristan B. says:

      Thank you so much for this Emilia! I just added a couple of them to a new post and weirdly the other two have stopped working? I am in text mode but I wonder if something happens when I check in visual mode? I would LOVE some feedback and why it may stop working and if you have any recommendations for having these work on mobile devices, a plug in perhaps?

      • Emilia Farrace says:

        Hi Tristan!

        This sounds like something that WordPress keeps doing :/ — When you click on over to visual editor – it removes the formatting and thus – the code 🙁 When completing the code – make sure you stick with TEXT edit and press publish directly from there to ensure it works.

        As for mobile – no – unfortunately this technique doesn’t work on mobile because you don’t really “hover” your mouse on mobile devices – it’s simply a click.

        Hopefully this helps – thanks so much for your comment! 🙂

    • Sam ZImmer says:

      Thank you for this Emilia! Had been struggling trying to get hover effects to work and your clear breakdown was a big help. Do you know how i can adapt the code so that the link opens in a new tab?
      Cheers,
      Sam

    • Pablo says:

      Hi thank your for this post, it really helps me…but how can I set the image size? when I use it on my page the images are displayed in a default size, I want to make them bigger.

      Thank you

      • Emilia Farrace says:

        Hi Pablo!

        You can add the dimensions of your image directly in the attributes. Add height=”250″ width=”250″ (just replace the numbers with your images dimensions). So your line of code will look like this:



        Make sure your image height and widths are the same for both hover images.

    • Emilia, I’m using this and having some serious troubles. the page is c9ed.com and the “Read More” buttons are what I’m trying to use this for. Upon hover, I want them all to show the image I’ve created with the colors reversed, but I can’t get it to work. I saw your comment about the visual editor undoing the code, so I’ve been working straight from the HTML editor and still nothing 🙁

      • Emilia Farrace says:

        Hi CloudNineEventDesign!

        I took a quick peek at your code, and I think you’re using the re-sized version of your images from within WordPress. All the code is mashed together and there is no space no ‘ ” ‘ ” used (these are key).

        Are you inserting your images via the Media Library or grabbing the actual permalink of the photo’s URL on the code you’re making?

    • Chris says:

      Hello,

      Thanks so much for this! It’s really helped me out.

      I was wondering though if you could explain how to have the images ease in and out rather than be instant transitions.

      Thanks! 🙂

      • Emilia Farrace says:

        Hi Chris!

        You’re very welcome! 🙂 Creating an ease-in transition requires a bit more CSS involvement. Do you have access to your theme’s Stylesheet and feel comfortable altering the code?

        Emilia

        • Raph says:

          Hi Emilia , I do have access to my theme’s Stylesheet and feel comfortable altering the code. Please write some code for me to make the images ease in and out with turn around effect at predetermined speed. Thanks

        • Emilia Farrace says:

          Hi Raph,

          Sorry, I can’t provide code for you for what you’re requesting on a blog comment. It does require a bit more work than something like this. You’d have to get into the stylesheet and create code that works with your theme.

          Emilia

    • equita88 says:

      Thank you! The code worked a treat.

    • Ali Hameed says:

      Hi,
      Thanks, great article. Can we do the same thing with the text i,e. hover text and display image?

      Regards,
      Ali

      • Emilia Farrace says:

        Thank you and you’re very welcome! 🙂 Creating hover text over a display image requires a bit more CSS involvement. Do you have access to your theme’s Stylesheet and feel comfortable altering the code?

        Emilia

    • Marcel says:

      Thanks for the information 🙂 Cheers

    • x5kbc8 says:

      Hi, Thank you very much. I only have a weird problem! It works… BUT the picture is placed on the left side of my page. And I want to centre it. So when I put it in the centre the picture does not work anymore and the code just dissaperes. Very weird isnt it? Hope you can help me out! 😀 Thanks!

      • Emilia Farrace says:

        Sorry for this late reply!

        The problem with using code in WordPress in the page editor is if you’re using it in “Visual” it actually deletes any code you’ve formatted (so frustrating, I know!) so if you’d like to align in the TEXT editor, you’ll need to include


        < div align="center" > your image code < / div>

        Include the above code without the spacing between the <>

    • henzorocks66 says:

      Thank you so much! I haven’t tried it yet, but I’m hoping to use it to create an Advent Calendar on my website – with a ‘No Peeking!’ message on rollover when users hover over / click ‘days’ too soon.

    • David says:

      how do I make the images be all the way to the right?

      • Emilia Farrace says:

        Hi David,

        You’d need to include code for that in the Text editor.


        < div align="right" > your image code < / div>

        Include the above code without the spacing between the <>
        Would be what you use.

        Emilia

    • Hi there,
      This seems so simple but, something seems to be missing in the code. My firts section goes correctly. The first image comes up OK so does the second but the repested image does not work on “mouseout”. Does this have something to do with the two apostrophes being or not being there.
      Please comment.
      Thank you,
      Chris

      • Emilia Farrace says:

        Hi there! The apostrophes do need to be there but they need to be plain-text apostrophes. If they are “smart” ones (the ones that curl) it will break the code. Follow the code carefully WITH those there … ‘ and ” in some places and it should work out. Please share your link if you’d like.

        Thanks!

    • Robert Klips says:

      Hi. I used code like this on my web site and then a couple-few months ago I guess when WordPress automatically updated, all of the mouseover-specific coding was stripped out of all my pages. Do you have any idea why or whether this would happen again and again if I re-created the mouseover code? Thanks.

      • Emilia Farrace says:

        Hi Robert,

        I don’t know or have heard of WordPress updates changing the code or information of your posts. What DOES happen, I find, is that when you switch between the TEXT + VISUAL panels it ruins the code listed above and turns it into one image placement (very frustrating!).

        Can you try repeating the code/process on your blog and see what happens?

        Emilia

    • How would I make this work work on a restaurant menu? Mouseover a menu item text and see a nice small image pop up click it if you want to see a bigger image. I’ve looked at numerous wordpress plugins and they are more difficult to use. I want simple. Plus, I’ll be working with other people and they will want simple as well.

      • Emilia Farrace says:

        Hi David,
        Unfortunately, you’re actually asking to do something different than this post is about (image appearing on hover over text, not rollover on another image). I think I’ve seen plugins that you’ve probably searched out, but I haven’t seen something like that on a standalone plugin (even just popped in a did a quick search and couldn’t find out – albeit I did not search for very long).

        I’ve taken a look at your website and menu (yum!) and think it may be a bit busy if you start creating all those hovers anyway (not not very mobile-friendly).

        Have you searched for a theme that is meant for restaurants/great menus? Sometimes when you get a theme that’s designed and developed for a certain industry, they create these types of features to really make your menus stand out, or other elements that may be useful.

        If you’d like to chat more, you can send an email to emilia@simplyelaborate.com and I can see if I can help!

        Emilia

    • Kenny McLean says:

      I love this. I used it years ago but forgot the exact syntax.
      Now working happily on my new site.
      The site need a lot of work yet but I”ve not told anyone about it until now 😀

    • Helen O'Neill says:

      Hi,
      I have used your wonderful code (thanks so much for the code, I’ve been struggling with this for ages and It’s the only code I’ve found that actually works. I have however, modified it by removing the link tag and changing the ‘onmouseover’ to ‘onclick’. This works once, but I want to continue toggling back and forth between the images. Are you able to help?

      Many thanks,
      Helen

      • Emilia Farrace says:

        Hi Helen,

        You’re asking to complete a different code than what this post outlines. For what you’re asking, that code needs to be create within the CSS script of your website, and should be completed by a developer (or you!) if you feel comfortable mucking around in that code.

        Sorry I can’t be of more help here!
        Emilia

    • Josh says:

      I’m trying to do this but when I save it half the code disappears? First image loads up fine but second image doesn’t show. How can I fix this?

      • Emilia Farrace says:

        Hi Josh – thanks for commenting! It sounds like your WP is refreshing and you may be completing this in the VISUAL side of the word editor? Is that the case? WP is a bit finicky and this code needs to be included in the TEXT EDITOR tab of the interface. Then, you must NOT go back to the visual editor after (so, enter this code as the last thing you do before saving your blog).

        It may be frustrating, but that’s the way WP is for now.

    • ecorvo says:

      I find this plugin useful for creating hover effects and roll over effects on images https://wordpress.org/plugins/wp-visual-slidebox-builder/

      • Emilia Farrace says:

        Plugins are great! However, sometimes using too many plugins in WordPress website can bulk down loading speeds for your user. Knowing the manual ways are good to have on hand! Thanks for the resource though!! 🙂

    • Julia says:

      Hi, thanks for posting about this effect. I really want to implement it on my website, but I end up with no effect and only the second image showing. Help, please! I am saving while in the text editor. Thank you

      • Emilia Farrace says:

        Hi Julia,
        Thanks for your message! I’m sorry it’s not working out, but can’t really help without seeing the issue. May you post your website? I can’t guarantee we can do anything, but willing to take a look.

        Thanks,
        Emilia

    • Launa says:

      Hi Emilia!

      I’m so happy I found this code, as I knew it could be done but I’m very new to all of this. It all seems to work great, except it won’t publish properly… half the code gets deleted. You said in an earlier comment to publish before switching back to the visual editor, but I don’t think I’m on the same kind of page.

      I’m trying to edit a page from a website I’m working on for a local company. I’ve added a text block element and have pasted that code into the text side of the text block. But then I have to click save, which immediately deletes half the code, and then I can click publish, but there’s no point in that.

      What can I do?

      • Emilia Farrace says:

        Hi Laura,

        Sounds like you are in “Visual” mode, not “Text” mode which is what, for some reason, erases the second line of the code. There is a tab on the top right hand corner of the text-area where you write all your information and you go there and swap between the two. Once you’re in Text, enter your code and DO NOT swap back to visual, as doing this is what erases that second line of code!

        Hope that helps, thanks for reading,

        Emilia

    • Launa says:

      The problem is, I’m in text mode when I put the code in. I press save (I don’t switch to visual), then I click publish or preview. What’s bizarre is that after I’ve pressed save, the mouse over works in the Avia layout builder, but it won’t work if I publish the page.

    • Emilia Farrace says:

      Hi Launa,

      This code/post is for people who are putting up a page or blog posts directly into the WordPress text editor. If you’re using a page builder (Avia Layout Builder), this information may not be correct.

      Usually with page builders, they include a spot to include RAW HTML which is what the code above is. Maybe try that?

      Hopefully that helps.
      Emilia

    • Sumit says:

      Awesome, it works

    Leave a Reply

    Your email address will not be published. Required fields are marked *

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