How to Create a Rollover Hover Image on your WordPress Site

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

35 thoughts on “How to Create a Rollover Hover Image on your WordPress Site

    1. 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! 🙂

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

    1. Yes, that’s what I used to make sure that the code shows up on the website instead of the hovering image. I will take a look and make it clearer. Thanks for showing that!! 🙂

  2. 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 ?

  3. 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?

    1. 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! 🙂

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

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

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

  6. 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 🙁

    1. 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?

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

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

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

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

  8. 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!

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

TELL ME YOUR THOUGHTS