Have you ever wondered if there’s an easy way to change an image on hover? It should be something easy, right? It’s only easy when you truly master how it’s done. I’ll show you how I manage to make it work.

The solution is simple. Use the background property and the hover selector. No need for fancy plugins – just the Code Module.

Check the preview for an example of how it could be used in your project.

Preview

I’m using the Extra theme for this tutorial – but you may use Divi or any other WordPress theme.

So, how does the hover animation works? I’ll explain below.

How to change an image on hover

First of all, separate 2 images to use as the background image.

Then, let’s start by creating a Code Module and pasting the following code inside of it:

<a href="#" class="happy"></a>

Let’s use the happy class inside the anchor tags to replicate the preview of this tutorial.

Now, you can easily target it in CSS by using a.happy and a.happy:hover.

You’ll add the image with CSS. Remember, for this to fully work you need to set the correct height and width of the image. If both images have the same size, you just need to specify in the a.happy class.

Add the following code inside your page CSS or go to Extra > Theme Options > Custom CSS.

a.happy{
display: block;
height: 128px /* -- set image height -- */;
width: 128px /* -- set image width -- */;
background: url(link-here);
margin: 0 auto;
background-repeat: no-repeat;
transition: .3s all;
}
a.happy:hover {
background: url(link-here);
transform: translateY(-5px) /* -- animate up on hover -- */;
transition: .3s all;
}

Remember to properly set the correct height and width of your images.

The margin: 0 auto property is to center align it.

Transition .3 all makes a smooth transition between images on hover.

I like the subtle effect of transform: translateY(-5px) on hover. Those micro animations enhance the user experience.

Conclusion

It’s easier than you thought, right? It’s good to document this kind of feature because sometimes I want to do this neat effect on a client’s project and it takes too long to study or search for the right code. Now, it’s just about copying and pasting.

You can achieve this result using plugins, but I always try to find the solution without plugins first. This tutorial shows how to change an image on hover using no plugins at all. What do you think about it?

I hope to have helped you somehow. Feel free to ask questions or send me feedback.

See ya!