1. Home
  2. Tutorials
  3. Pages
  4. Display an image on hover
 

ImageDisplay an image on hover

In order to personalize your website, you can add an image on hover when you pass your mouse over an image.

This can be used in many ways, but is perfect when wanting to show a before/after without going to another page..

In order to add and image on hover you will need the basic notions in HTML, but it is rather easy so let's see together how to do it on your website.

 

HTML : what is that?

HTML, HyperText Markup Langage, is a standardized computer language allows you to determine effects on your content. Text and content added with the visual page editor is also visible in HTML when using the button "</>HTML editor" or the "source" button.

Image on hover : what does it look like?

Hover

Manage your images

Upload the photos to your file storage

Before doing anything else, ensure that you have uploaded the images into your storage space. You can then easily retrieve the URL of the photos that will be necessary in the code.

Retrieve the image URLs

To do this we have written a tutorial dedicated : find the link of files and images in your storage space. Once you have retrieved the URLs of the images you want to use, you can then create your hover image using the following code.

Copy/Paste the following code

<p><img alt="Hover" onmouseout="this.src='https://www.emyspot.com/medias/images/hover-to-see-what-i-look-like.png';" onmouseover="this.src='https://www.emyspot.com/medias/images/the-orange-appears-on-hover.png';" src="//www.e-monsite.com/medias/images/bleu.png" /></p>

Paste the following code in the HTML editor (in the top right) of your visual editor where you want to add the image.

You now have the basic HTML format for the images on hover: it is now necessary to edit the code and replace the 2 images with the images of your choice.

Replace all URLs

This will be the code that you will, replacing the existing URL with your image URLs, and create the three following links.

  • 1) onmouseout="this.src='https://www.emyspot.com/medias/images/hover-to-see-what-i-look-like.png';"
  • 2) onmouseover="this.src='https://www.emyspot.com/medias/images/the-orange-appears-on-hover.png';"
  • 3) src="https://www.emyspot.com/medias/images/hover-to-see-what-i-look-like.png"

URLs 1 and 3 are identical, and will represent the base image, without hover.

URL 2 corresponds to the image that appears when hovered.

Replace the 1 and 3 URL with your base image. The 2 URL should be replaced with the image URL that you want to appear when hovering.

You must be careful to change only the URL and no other part of the code. The URL will start with "http(s)" and finish with ".png" or ".jpg"

Insert this code into the page of your choice and then save.

Optional : Give a title on hover

At the beginning of this code you can see the attribute alt: alt="hover". This attribute should be a keyword referring to the image or the subject of your page.

Ex : If you have created before after page, You can create an alt title of "After".