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

liveBooks Support

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. Find the Effects area and first select the Overlay tab

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 dropdown 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.

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:

10. Select Save

12. Select Publish to make it live now.