Show an Image on Hover — Cargo Support Window

Show an Image on Hover

First, copy the code at the top of the Support Page. In the Design tab, open the CSS Editor. Paste this code at the bottom.

Click into a Page where you want to display this effect. Add text to the Page that the visitor will hover over with their cursor.

Upload the Image that should appear upon hover. You can then find its Image Number:

In the Content tab, open the “Images” menu. Hover over the Image for a few seconds. An infotip will appear displaying its Image Number in this form:

You can then add the hover-title and hover-image divs to make this Image appear when hovering over content on the Page.

At the bottom-right of the Formatting Toolbar, open the Code View.

Find your text content that visitors will hover over with their cursor. Add the hover-title divs around the text. After this, add the hover-image divs around the Image Number:

<div class="hover-title">Your Text Here</div>
<div class="hover-image"></div>

The hover-title and hover-image divs must be next to each other. They cannot have other tags between them.

There are many possible variations of this customization. For instance, the effect can happen upon hovering over an image instead of text. Try formatting an Image as the hover-title, like this:

<div class="hover-title"></div>
<div class="hover-image"></div>

You can change the size of the hover image by modifying the values in this section of CSS:

/* Change width and height to scale images */
width: 90vw;
height: 90vh;