Better Blogging: CSS Image Swap on Hover

Just in case you ever want to display one image and have it swap to another one when someone hovers on it, here’s how! Hover your mouse over the image below (Yay, Bitmoji!) and you’ll see what I mean. I came across this method for swapping images on hover here and it worked better (and on more browsers) than methods I’ve previously tried, so it’s the one I’d use for now.

(Note: The directions here work if your site is on WordPress.com and has an upgrade that allows Custom CSS.)

In the Text Editor on a page or post or a Text Widget, paste the following HTML where you want your image to appear:

<a class="imghoverswap" href="#"><img src="Insert_First_Image_URL_Here" /><img src="Insert_Second_Image_URL_Here" /></a>

Edit the HTML to include the URLs to your images in the two spots designated in the code above. Save/publish.

Then go to Customize > CSS and add this:

.imghoverswap img:last-child{display:none}
.imghoverswap:hover img:first-child{display:none}
.imghoverswap:hover img:last-child{display:inline-block}

(If you’re using your own install of WordPress, you can do this with the Jetpack plugin with the Custom CSS module activated. Once activated, paste the CSS in Appearance > Edit CSS.)

You can change the imghoverswap part to whatever you want, just make sure all four instances are changed to the same thing so they match and work together.

Happy swapping!

More CSS tips can be found here.

Posted by

Introvert who likes to talk. Feminist & Texan. Romance novel enthusiast. Happiness Engineer at Automattic for WordPress.com.

3 thoughts on “Better Blogging: CSS Image Swap on Hover

Comments are closed.