How do I enable Overlay and Hover Effects on my image(s)?

Craft a more beautiful image block or image gallery with our stylized overlay and hover effects. Image effects allow you to display titles/descriptions and can allow links to other pages on your site.

1. Select Design from the Dashboard navigation bar and navigate to the page that contains your Image or Image Gallery.

2. Select the Page tab in the top righthand side of the design panel.

3. Select your Image or Image Gallery from the list of blocks on your page.

4. Locate the section titled Images and you will see three setting tabs: Style, Overlay, and Hover.

Style tab: All of your primary design settings for your image(s) sit in this tab.

Overlay tab: In this tab, you can add effects to your images that are seen when not hovered over by the mouse. The effect is constantly overlaid on the image(s).

Hover tab: Add effects to your image(s) that are seen only when a mouse hovers over the image(s).

5. Select the Overlay tab to manage the effects that constantly appear.

6. Under the dropdown box and next to Overlay Effect, choose 1 of 3 effects available to the Overlay effect option.

7. After you choose an effect, you will find options for an Overlay Color. Choose an overlay color by selecting it in the color picker and then adjust it's opacity to your taste.

8. Tick on "Include image title and description" to enable a title and/or description on your image(s), otherwise only visual effects will appear. You will also see options to position/align/style the text here. With the image title enabled, original filenames will appear if you haven't edited the title of the image within Content.

Helpful Article: How do I edit the title and description fields of my image(s)?

9. Now select the Hover tab under Effects to adjust the Hover options, you have the same styling and effect options as the Overlay tab here.

10. Next to Hover Effect you will see a dropdown with 10 different Hover Effects to choose from:

The same image Title and Description options are available within the Hover tab as well, enable those tick boxes if needed.

11. Select Save and Publish to make your changes live.

 

Powered by Zendesk