Hover Image Reveal

HOVER IMAGE REVEAL

Turn Showit text into an interactive image reveal. When a visitor hovers over a text element, its corresponding image appears exactly where you placed it in your Showit design.

The image disappears again when the visitor moves their cursor away from the text.

HOW TO USE IT

1. CREATE YOUR TEXT

Add up to four text elements in Showit.

Type your text normally and style it however you'd like using Showit's text settings.

Each text element that triggers an image should be its own Showit text element.

2. ADD THE TEXT CLASS SELECTORS

Select your first text element and go to:

Advanced → Class Selectors

Add: hover-one
Then click the check mark to save it.

For the remaining text elements, add:

hover-two

hover-three

hover-four

Use one Class Selector for each text element.

Showit may display the Class Selector with a period before the name after you add it.

3. ADD AND POSITION YOUR IMAGES

Add one Showit image for each text element.

Resize, crop, and position each image exactly where you want it to appear when its corresponding text is hovered.

The code does not control the image position. The image will reveal wherever you place it on the Showit canvas.

4. ADD THE IMAGE CLASS SELECTORS

Select your first image and go to:

Advanced → Class Selectors

Add:

image-one

For the remaining images, add:

image-two

image-three

image-four

Match each image to its corresponding text:

hover-one → image-one

hover-two → image-two

hover-three → image-three

hover-four → image-four

5. ADD THE JAVASCRIPT

Select the page name in the Pages panel.

Go to:

Advanced Settings → Page Loaded Javascript

Paste the entire Hover Image Reveal code into the box.

Do not add <script> tags. Showit adds them automatically.

6. PREVIEW YOUR EFFECT

Preview your site and move your cursor over one of the text elements.

The corresponding image will appear in the position you chose in Showit.

Move your cursor away from the text and the image will disappear.

CUSTOMIZE YOUR TEXT

Your text can say anything you'd like.

Simply change the wording directly in Showit.

As long as you keep the same Class Selector on the text element, the effect will continue to work.

CUSTOMIZE YOUR IMAGES

You can replace the images directly in Showit.

Resize, crop, and position them using Showit's normal design controls.

As long as you keep the same Class Selector on the image, the effect will continue to work.

IMAGE POSITIONING NOTE

The revealed images stay exactly where you place them on your Showit canvas.

Images can appear beside the text, overlap other elements, sit in a corner of the canvas, or be positioned anywhere else that works with your design.

The images are automatically hidden until their corresponding text is hovered. You do not need to change the image opacity or visibility settings in Showit.

PAIRING NOTE

Each text Class Selector is paired with its matching image Class Selector:

hover-one → image-one
hover-two → image-two
hover-three → image-three
hover-four → image-four

Make sure the matching text and image use the same number word.

MOBILE NOTE

Hover Image Reveal is designed for desktop, where visitors have a cursor.

For mobile, use Showit's native mobile layout to determine how you would like the content to appear.

QUICK INFO

Difficulty: Easy
Requires: Class Selectors + Page Loaded Javascript
Text: Native Showit text
Images: Native Showit images
Text Classes: hover-one, hover-two, hover-three, hover-four
Image Classes: image-one, image-two, image-three, image-four
Trigger: Hover
Image Position: Controlled in Showit
Images Hidden Automatically: Yes
Mobile: Use native Showit layout
Coding Knowledge: Not required