Category Archives: Get Developed

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.

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src=’URL OF THE SECOND IMAGE GOES HERE’" onmouseout="this.src=’URL OF THE FIRST IMAGE GOES HERE’" /></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! 😉