Enable Overlay or Hover Effects to Your Images
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!
Related Articles
Customize Bold Text (Sitewide Feature)
You may select a special font, color, or background color, for all of the bold text on your site. You can access these settings within your Design area. 1. Select the Design tool in the navigation bar. 2. Click the Styles option on the right-hand ...Add Sitewide Banner Above Top Navigation
You can call attention to a sale or a special announcement to your website's visitors by adding a sitewide banner above your website's top navigation bar. This process involves building a text block, then adding some custom CSS and JS code to your ...Wrap Text Around an Image
If you would like a paragraph of text to wrap around an image, follow these steps: 1. Select Design tool in the gray navigation bar. 2. Click on the page you wish to edit in the design preview window. 3. Select the image block in the design panel, ...Add an Image/Image Gallery
Add an Image or Image Gallery block to your page by using one of our preset content blocks. Note: An Image block only allows you to upload one image, while an Image Gallery allows you to add multiple. 1. Select the Content tab in the gray navigation ...Change the Position of Your Image Gallery Arrows
Image galleries are a great way to showcase portfolios or multiple images for visitors to flip through at their own leisure. Our classic slideshow and carousel image galleries now have the ability to move the gallery arrow sliders on the outside of ...