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.