Add Overlay Text 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.
- Click Design at the top of your liveBooks dashboard, and navigate to the page that contains your image or image gallery.
- Select the Page tab at the top of the right-hand sidebar.
- On the sidebar, select your Image or Image Gallery from the list of blocks on your page.
- On the sidebar, scroll down until you reach the section titled Images.
- Select the Overlay or 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.
- Under the drop-down box and next to Overlay Effect, choose 1 of 3 effects available to the Overlay effect option.
- 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 liking (if you don't want any color overlay to appear over the image, then set the Opacity to "0").
- Check the boxes Include image title or Include image description (or both) to enable a title and/or description on your image(s). 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.
- Now, select the Hover tab under Effects to adjust the Hover options. You have the same styling and effect options as the Overlay tab.
- Next to Hover Effect you will see a drop down with 10 different Hover Effects to choose from:
- Once you've made all of your changes, select the Save button on the bottom-right corner of the page.
- Select Publish to take it live!