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:
(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.
More CSS tips can be found here.