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 the Design tool from the gray navigation bar and click into the page that contains your Image or Image Gallery.
2. Select the Page tab in the top right-hand side of the design panel, and then click on your Image or Image Gallery from the list of blocks on your page.
3. Locate the section titled Images and you will see three setting tabs: Style, Overlay, and Hover.
Style: All of your primary design settings for your image(s) sit in this tab.
Overlay: 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: Add effects to your image(s) that are seen only when a mouse hovers over the image(s).
4. Select the Overlay tab to manage the effects that constantly appear.
5. Under the drop-down box and next to Overlay Effect, choose 1 of 3 effects available to the Overlay effect option.
6. 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.
7. 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. Note: To add/edit the text that you would like to display on your Image Overlay, you can enter that information in the Details tab in the Image Collection. Find out more information here.
| Helpful Article: How do I edit the title and description fields of my image(s)? |
8. 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.
9. Next to Hover Effect, you will see a drop-down 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.
10. Select Save and Publish to take your changes live!