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.
- 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.
- Open a new browser window and upload both images into your media library in WordPress.
- Create or Edit your Post or Page in WordPress.
- Choose “Text” to edit the code directly on the page.
- 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>
- Change the parts of the code with your URLs of your images and where you want the image to be linked to.
- 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!
