Divi Image Icon Effect

Pick your favorite from the 6 most interesting hover effects making your post attractive to all visitors.

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 default and select an image when hovered.

After placing both the images this is how it looks on the front end.

Content → Icon

Include Icons one through four within the Icon feature.

Content → Icon

1. Use Icon – enable the switch to use an Icon
2. Icon Link Target – place a link for the Icon
3. Icon – select a suitable Icon for your design from the many premade icons in the collection.

Design → Hover Effect

Select Image Hover – from the six trendy hover effects, select the one that best suits your design.

Design → Fonts

Here we discuss what options you’re getting for text stylization of the heading and focus texts within the Image Icon 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.

Design → Fonts (continued)

1. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
2. Line Height – adjust the space between the lines using the slider.
3. Text Shadow – select a prebuilt shadow for your text

Design → Icon Settings

Choose a color for each of the four icons. You can use the color picker to select a color or place the hex code to achieve the exact shade required for the design.

Design → Icon Settings (continued)

1. Icon Size – Use the slider to adjust the icon size for desktops, tablets, and phones.
2. Icon Spacing – adjust the spacing between the icons
3. Icon Line Height – change the space between the lines using the slider.
4. Use Icon Background – choose a background color for the icons.
5. Text Shadow – include shadow to the icons.
6. Rounded Corners – adjust the four corners of the icons to get rounded corners on each or all four corners.

Design → Icon Settings (continued)

1. Border Styles – include borders on any side of the text or all four sides. 
2. Border Width – adjust the width of the border using the slider.
3. Border Color – pick a color for the border that you’ve added.
4. Border Style – select a style of the border from the premade border styles.