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!
Related Articles
Add an Image/Image Gallery
Add an Image or Image Gallery block to your page by using one of our preset content blocks. 1. Select Content in the navbar 2. Select the page you want to add an image to 2. While on the page, click on the green (+) icon that appears between the ...Position Your Images Alongside Text
Content positioning is a feature that is available to you in all image blocks, and it can be selected within the Design tab on your dashboard. How to position images within your page content 1. From Content, and in your page that includes your image ...Add a Drop Shadow to Your Images
Adding a drop shadow to your images gives your image depth and perspective. It makes it look like the image is popping right out of the screen! Images without a drop shadow effect: Images with a shadow drop effect: To add a drop shadow to your ...Expand Images to Fill Window (Set a Hero Image)
Note: This option is only available for Emerging, Professional, and Custom plans. This feature is not available on Legacy Hosting or Legacy Professional plans. A Hero Image is an image on your website that is the background for the navigation bar, as ...Wrap Text Around an Image
If you are displaying an image next to or near text on a page, you can set the text to "wrap" around the image. How to add text wrap 1. Select Design tool in the gray navigation bar. 2. Click on the page you wish to edit in the design preview window. ...