Divi Essential Documentation

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

Divi Ultimate Image Effect

Choose the best one you like from the 24 distinctively attractive hover effects for your images.

Content

7

Content → Text Option

Click on this option and you will get the amazing option that I am describing below.

Heading Text :
To set the superb Heading text use this option.

Focust Text :
Write here the important texts that you want to focus on your website to your visitors.

Selecting Heading Tag :

You may need to select heading tags such as H1, H2, H3, etc. Select this option and select your heading tag.

Content :

You may want to add paragraphs with different styles and lists as well as you may want to add web links. This option will provide you with many opportunities surely.

Content → Image

 In this module main part is the image and using this option you are able to select your image easily.

Design Tab

7

Design → Hover Effect → Select Image Hover

 This is an awesome option where from you can select 24 superb hover effects. Visitors will be happy when they will see different hover effects on images during visiting your website.

Design → Fonts Heading Text/Focus Text

 

1. Here you can change the background color of the Texts and also you can make texts transparent

2. In this option, lots of fonts are available so that you can design texts.

3. Using the Focus Font and Font style easily changes text style.

4. Select the Focus Text alignment option to keep texts in the center or on the right/left side.

Design → Focus Text Color

Use this option to change the focus text color.

Design → Opacity

Transparency plays a very essential role on a webpage. It lets you select how transparent the images on your web pages appear. You can adjust transparency through the opacity option.

Design → Description Text

 Using this option you are allowed to select font, font weight, font style, text alignment, text color, text size, letter spacing, line height, text-shadow of the description

Design → Sizing

Select this option to change the Module’s width, max-width, alignment, height, and max height.

Design → Spacing

While designing the contents you can select this option to adjust the heading margin and padding. Also, you can change the focus text padding, description margin, padding also module’s margin, and module’s padding.

How to show a text after Hovering on an image?

If you want to show the text after hovering then kindly use texts in the Content area. 

website WordPress divi plugins divi builder templates divi theme builder wp plugins divi theme latest version divi theme divi wp divi template create wordpress website the divi theme divi web design divi template wordpress divi free wordpress divi theme website builder divi divi builder divi page builder divi divi builder plugin divi website divi plugin wordpress divi layouts divi builder wordpress divi wordpress
How to show Different image after Hovering?

If you want to show the image after hovering then you can do it by following the below process:

In the Content tab find the Image option> Now Click on the hover option > You can get the Hover option > You can add there another image so that your visitors or customers can view the image after hovering.

website WordPress divi plugins divi builder templates divi theme builder wp plugins divi theme latest version divi theme divi wp divi template create wordpress website the divi theme divi web design divi template wordpress divi free wordpress divi theme website builder divi divi builder divi page builder divi divi builder plugin divi website divi plugin wordpress divi layouts divi builder wordpress divi wordpress
[dnxtiep_ultimate_image_hover dnxtiep_uih_heading_text=”Train To” dnxtiep_uih_heading_bold=”Toronto” dnxtiep_uih_description=”

Add your actual text here.

” dnxtiep_uih_image=”https://diviessential.com/wp-content/uploads/2021/05/5.jpg” dnxtiep_uih_description_margin=”5px||5px||true|false” dnxtiep_uih_bg_overlay=”#fcc100″ dnxtiep_uih_image_opacity=”0 ” _builder_version=”4.11.0″ hover_text_fonts_font=”||||||||” hover_text_fonts_text_color=”#ffffff” hover_text_fonts_font_size=”20px” dnxtiep_uih_body_font=”Assistant||||||||” dnxtiep_uih_body_text_color=”#ffffff” dnxtiep_uih_body_font_size=”16px” hover_text_heading_bold_font=”|900|||||||” hover_text_heading_bold_text_color=”#ffffff” hover_text_heading_bold_font_size=”20px” global_colors_info=”{}” dnxtiep_uih_image__hover_enabled=”off|desktop” dnxtiep_uih_image__hover=”https://diviessential.com/wp-content/uploads/2021/05/3.jpg”][/dnxtiep_ultimate_image_hover]

[dnxtiep_ultimate_image_hover dnxtiep_uih_heading_text=”Sunlight” dnxtiep_uih_heading_bold=”Boat” dnxtiep_uih_description=”

Add your actual text here.

” dnxtiep_uih_image=”https://diviessential.com/wp-content/uploads/2021/05/4.jpg” dnxtiep_uih_image_hover_effect=”effect-23″ dnxtiep_uih_bg_overlay=”#8300e9″ _builder_version=”4.9.4″ hover_text_fonts_font=”Lato||||||||” hover_text_fonts_text_color=”#ffffff” hover_text_fonts_font_size=”24px” dnxtiep_uih_body_font=”Assistant||||||||” dnxtiep_uih_body_font_size=”18px” hover_text_heading_bold_font=”Lato||||||||” hover_text_heading_bold_text_color=”#ffffff” hover_text_heading_bold_font_size=”24px” locked=”off” global_colors_info=”{}” dnxtiep_uih_image__hover_enabled=”off|desktop”][/dnxtiep_ultimate_image_hover]

[dnxt_next_text_hover_highlight thh_highlight_text=”Effect Style 01″ thh_hover_effect=”dnxt-thh-overline-left-underline-right” thh_text_alignment=”center” thh_hht_padding=”||0px||false|false” _builder_version=”4.16″ thh_plain_text_text_color=”#000000″ thh_highlight_text_font=”Poppins|600|||||||” thh_highlight_text_text_color=”#5a64ed” thh_highlight_text_font_size=”16px” thh_highlight_text_line_height=”24px” background_color=”#ffffff” module_alignment=”center” custom_margin=”-8px||||false|false” custom_padding=”5px||5px||true|false” border_radii=”off|||10px|10px” border_color_all=”#d1d1d1″ box_shadow_style=”preset2″ box_shadow_horizontal=”0px” box_shadow_blur=”30px” box_shadow_spread=”-6px” locked=”off” global_colors_info=”{}”][/dnxt_next_text_hover_highlight]
[dnxt_next_text_hover_highlight thh_highlight_text=”Effect Style 22″ thh_hover_effect=”dnxt-thh-overline-left-underline-right” thh_text_alignment=”center” thh_hht_padding=”||0px||false|false” _builder_version=”4.16″ thh_plain_text_text_color=”#000000″ thh_highlight_text_font=”Poppins|600|||||||” thh_highlight_text_text_color=”#5a64ed” thh_highlight_text_font_size=”16px” thh_highlight_text_line_height=”24px” background_color=”#ffffff” module_alignment=”center” custom_margin=”-8px||||false|false” custom_padding=”5px||5px||true|false” border_radii=”off|||10px|10px” border_color_all=”#d1d1d1″ box_shadow_style=”preset2″ box_shadow_horizontal=”0px” box_shadow_blur=”30px” box_shadow_spread=”-6px” locked=”off” global_colors_info=”{}”][/dnxt_next_text_hover_highlight]

How can we help?