Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Image Hover Box Effect

Divi Image Hover Box Effect

Divi Next’s ‘Image Hover Box’ is here to blow your mind with the latest collection of creative hover effects. With 50+ unique hover effects, you can showcase how creative minds have to think out-of-the-box to make interesting motions happen within a box.

Set up a suitable image with relevant content for your uniquely designed posts.

Content → Text 

  1. Heading Text – type the Heading Text in the content field.
  2. Focus Text – type the Focus Text in the content field.
  3. Select Heading Tag – choose a suitable heading tag

Content → Image

Image – select a picture to show in the Image Hover Box design.

Content → Overlay Background

  1. Overlay Background – enable to select overlay background color
  2. Select Background Color – choose a color for the overlay using the pointer or place the hex code to get the exact color.

Content → Caption Height

Caption Height – adjust the caption height using the slider.

Content → Hover Effect

Hover Effect – Among the 13 unique Hover Effects, select the best one for the Image Hover Box design.

Design → Heading Text

Here we discuss what options you’re getting for text stylization of the heading text within the Image Hover Box Effect module.

  1. Font – Select a font from the collection or use custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for the design.
  4. Text Alignment – align the text to the left, right, or center.
  5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  6. Text Size – easily resize the text using the slider for desktop, tablet, and phone.
  7. Letter Spacing – adjust the spacing between the letters using the slider.

Design → Heading Text (continued)

  1. Line Height – adjust the space between the lines using the slider.
  2. Text Shadow – select a prebuilt shadow for your text.

Design → Description Text

Here we discuss what options you’re getting for text stylization of the description text within the Image Hover Box Effect module.

  1. Font – Select a font from the collection or use custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for the design.
  4. Text Alignment – align the text to the left, right, or center.
  5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  6. Text Size – easily resize the text using the slider for desktop, tablet, and phone.
  7. Letter Spacing – adjust the spacing between the letters using the slider.

Design → Description Text (continued)

  1. Line Height – adjust the space between the lines using the slider.
  2. Text Shadow – select a prebuilt shadow for your text.

How can we help?