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 content titles/descriptions and link to other pages on your site.
1. Select Design from the navbar and navigate to the page that contains your image or image gallery
2. Select the Page tab at the top of the righthand design panel
3. Select your Image or Image Gallery from the list of blocks on your page
4. Find the section titled Images
5. Open up the dropdown menu, and then select the Overlay/Hover tab, depending on what you are trying to do
Overlay tab: Adds effects to your images that are seen when not hovered over (effect is constantly overlaid on the image).
Hover tab: Adds effects to your images that are seen only when hovered over.
6. Under the drop-down box and next to Overlay Effect, choose 1 of 3 effects available to the Overlay effect option
7. Look below the above area and 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. Check off Include image title and description to enable a title and/or description on your image(s), otherwise, only effects without content will appear. You will also see options to position/align/style the text here. Note: To choose which text 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.
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 drop down with 10 different Hover Effects to choose from:
10. Once you've made all of your changes, select the Save button
12. Select Publish to take it live!