Sometimes, you just want to add a little bit of pizazz to a single post. In this tutorial, we’ll teach your how to create rollover images with a little bit of HTML.
And if you don’t know what an “rollover image” is, it’s when a different image appears when the mouse hovers over it. You may want to use a rollover image to do before/after showcases, or add a ‘purchase now’ button and some type of transparency layer to an image that is linked to a macro conversation page, or any other type of effect.
Rollover Images with HTML
This is the easiest and the most basic.
When you add an image via WordPress’ “Add Media” button, then click on the HTML tab, you’ll see code that looks similar to the following:
<img class="size-full wp-image-573 aligncenter" src="https://skookummonkey.com/wp-content/uploads/2014/07/css-html.png" alt="css-html" width="100%" height="auto" />
It is the “src=” information that we need to pay attention to. src = image source.
Let’s just say that, when people put their mouse over the above image, we want a Skookum Monkey banner to appear. The code, before changes, would look like this:
<img class="size-full wp-image-573 aligncenter" src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'"width="100%" height="auto" />
We want to change where it says IMAGE1 and IMAGE2 to the different URLS for the before and after images, like so:
<img class="size-full wp-image-573 aligncenter" src="https://skookummonkey.com/wp-content/uploads/2014/07/css-html.png" onmouseover="this.src='https://skookummonkey.com/wp-content/uploads/2016/08/banner2.png'" onmouseout="this.src='https://skookummonkey.com/wp-content/uploads/2014/07/css-html.png'"width="100%" height="auto" />
You add the above code to the Text(HTML) tab.
NOTE: ONCE YOU SWITCH TO THE HTML TAB, YOU CAN’T SWITCH BACK TO THE VISUAL EDITOR. DOING SO ERASES THE MOUSEOVER/MOUSEOUT CODE. YOU MAY WANT TO ADD THE ROLLOVER HTML CODE AS YOUR FINAL STEP IF YOU ARE NOT COMFORTABLE WRITING ENTIRE POSTS IN HTML.
See it action below. Hover over the image:
If you were wanting the image to be a CTA (Call To Action), then you need to also add an a tag to the above, so that clicking on the image would take the person to a new page.
The code would look like this:
<a href="URL"> <img class="size-full wp-image-573 aligncenter" src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'"width="100%" height="auto" /></a>
You would change URL, IMAGE1, and IMAGE2 to the appropriate links, like so:
<a href="https://skookummonkey.com/contact/"> <img class="size-full wp-image-573 aligncenter" src="https://skookummonkey.com/wp-content/uploads/2016/08/css-htmlcta.png" onmouseover="this.src='https://skookummonkey.com/wp-content/uploads/2016/08/banner2cta.png'" onmouseout="this.src='https://skookummonkey.com/wp-content/uploads/2016/08/css-htmlcta.png'"width="100%" height="auto" /></a>
Now see it in action below (we added target=”_blank” after the link URL so that you aren’t taken away from this blog post while testing the action).
And that is how you create rollover images with HTML.
Want links to handy-dandy tutorials like this and information to help your business grow right in your inbox? Then sign up for our newsletter: Learn all about WordPress and get better at CSS and HTML, one email at a time.