Simply Elaborate Creative Agency
  • 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! 😉

    64 COMMENTS

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

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

      • 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! 🙂

    • 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.

    • I’ve sent you an email!

    • 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 ?

    • 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?

      • 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! 🙂

    • 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

    • 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

      • 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 🙁

      • 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?

    • 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! 🙂

      • 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

        • 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

        • 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

    • Thank you! The code worked a treat.

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

      Regards,
      Ali

      • 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

    • Thanks for the information 🙂 Cheers

    • 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!

      • 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 <>

    • 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.

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

    • 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

      • 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!

    • 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.

      • 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.

      • 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

    • 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 😀

    • 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

      • 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

    • 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?

      • 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.

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

      • 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!! 🙂

    • 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

      • 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

    • 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?

      • 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

    • 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.

    • 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

    • Awesome, it works

      • Hi Maryelle,

        The URL refers to your decision to have the image rollover be a clickable link to somewhere else. If you do not want your images to link anywhere, you would not include a URL in your code. However, there is always usually a clickable link when creating something like this because you’d be encouraging your user to hover their mouse over the images – what would be the purpose?

        Hopefully this helps, thanks!! 🙂
        Emilia

    • Hi, thanks for the tip.
      I added the code to my webpage in the inspector but how can I make the changes permanent ?

    • Hi, I just wanna say thank you!!

    Leave a Reply

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