Hover Gallery
Galeri Hover ialah modul elegan yang boleh membawa tapak anda ke peringkat seterusnya. Tambah berbilang kotak kandungan dan tukar latar belakang bahagian secara ajaib apabila pengguna beralih tetikus atau mengklik item grid.
[dipi_hover_gallery active_item_bg_color=”#000000″ item_bg_color=”rgba(10,10,10,0.5)” columns=”1″ grid_gap=”0px” grid_width=”340px” grid_full_height=”on” grid_alignment=”center-left” gallery_animation=”FadeLeft” animation_speed=”0.5s” columns_tablet=”1″ columns_phone=”1″ columns_last_edited=”on|tablet” grid_width_tablet=”50%” grid_width_phone=”70%” grid_width_last_edited=”on|tablet” grid_full_height_tablet=”off” grid_full_height_phone=”off” grid_full_height_last_edited=”on|tablet” grid_alignment_tablet=”center-left” grid_alignment_phone=”center-center” grid_alignment_last_edited=”on|phone” _builder_version=”4.19.4″ _module_preset=”default” content_title_font=”Poppins|700|||||||” content_title_text_align=”left” content_title_text_color=”#FFFFFF” content_title_font_size=”22px” content_desc_font=”Poppins||||||||” content_desc_text_color=”#FFFFFF” content_desc_font_size=”12px” content_title_active_text_align=”left” border_width_bottom_item=”1px” border_color_bottom_item=”rgba(10,10,10,0.18)” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/venice-07.jpg” title=”Venice” content_text=”
Venice, known also as the “City of Canals” and “The Floating City%22 is arguably one of Italy’s most picturesque cities.
” use_button=”on” button_text=” ” button_url=”#” admin_label=”Venice” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”RGBA(255,255,255,0)” content_button_border_width=”1px” content_button_border_color=”RGBA(255,255,255,0)” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#FFFFFF” content_button_on_hover=”off” content_button_custom_margin=”20px|||-7px|false|false” content_button_custom_padding=”3px|35px|35px|0px|false|false” custom_content_button_active=”on” content_button_active_text_size=”20px” content_button_active_text_color=”#15022A” content_button_active_bg_color=”RGBA(255,255,255,0)” content_button_active_border_width=”1px” content_button_active_border_color=”#FFFFFF” content_button_active_use_icon=”on” content_button_active_icon=”$||divi||400″ content_button_active_icon_color=”#FFFFFF” content_button_active_on_hover=”off” content_button_active_custom_margin=”|||2px|false|false” content_button_active_custom_padding=”3px|35px|35px|4px|false|false” custom_padding=”|30px|40px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#0a0a0a” background_enable_color__hover=”on” use_background_color_gradient__hover=”off” item_bg_color__hover_enabled=”on|desktop” item_bg_color__hover=”#000d21″ item_bg_enable_color__hover=”on” content_button_active_border_color__hover_enabled=”on|hover” content_button_active_border_color__hover=”#FFFFFF” content_button_active_bg_color__hover_enabled=”on|desktop” content_button_active_bg_color__hover=”#FFFFFF” content_button_active_bg_enable_color__hover=”on” content_button_active_icon_color__hover_enabled=”on|desktop” content_button_active_icon_color__hover=”#15022A” content_button_active_custom_padding__hover_enabled=”on|hover” content_button_active_custom_padding__hover=”|35px||4px|false|false” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/warsaw-08.jpg” title=”Warsaw” content_text=”Warsaw is a mixture of relaxing green spaces, historic sites and vivid modernity. Discover the charming Old Town, Wilanów Palace.” use_button=”on” button_text=” ” button_url=”#” admin_label=”Warsaw” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”RGBA(255,255,255,0)” content_button_border_width=”1px” content_button_border_color=”RGBA(255,255,255,0)” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#FFFFFF” content_button_on_hover=”off” content_button_custom_margin=”20px|||-7px|false|false” content_button_custom_padding=”3px|35px|35px|0px|false|false” custom_content_button_active=”on” content_button_active_text_size=”20px” content_button_active_text_color=”#15022A” content_button_active_bg_color=”RGBA(255,255,255,0)” content_button_active_border_width=”1px” content_button_active_border_color=”#FFFFFF” content_button_active_use_icon=”on” content_button_active_icon=”$||divi||400″ content_button_active_icon_color=”#FFFFFF” content_button_active_on_hover=”off” content_button_active_custom_margin=”|||2px|false|false” content_button_active_custom_padding=”3px|35px|35px|4px|false|false” custom_padding=”|30px|40px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#002a51″ background_enable_color__hover=”on” use_background_color_gradient__hover=”off” content_button_active_bg_color__hover=”#FFFFFF” content_button_active_bg_color__hover_enabled=”on|desktop” content_button_active_border_color__hover=”#FFFFFF” content_button_active_border_color__hover_enabled=”on|hover” content_button_active_icon_color__hover=”#15022A” content_button_active_icon_color__hover_enabled=”on|desktop” content_button_active_custom_padding__hover=”|35px||4px|false|false” content_button_active_custom_padding__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/barcelona-08.jpg” title=”Barcelona” content_text=”Barcelona is a city with a wide range of original leisure options that encourage you to visit time and time again.” use_button=”on” button_text=” ” button_url=”#” admin_label=”Barcelona” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”RGBA(255,255,255,0)” content_button_border_width=”1px” content_button_border_color=”RGBA(255,255,255,0)” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#FFFFFF” content_button_on_hover=”off” content_button_custom_margin=”20px|||-7px|false|false” content_button_custom_padding=”3px|35px|35px|0px|false|false” custom_content_button_active=”on” content_button_active_text_size=”20px” content_button_active_text_color=”#15022A” content_button_active_bg_color=”RGBA(255,255,255,0)” content_button_active_border_width=”1px” content_button_active_border_color=”#FFFFFF” content_button_active_use_icon=”on” content_button_active_icon=”$||divi||400″ content_button_active_icon_color=”#FFFFFF” content_button_active_on_hover=”off” content_button_active_custom_margin=”|||2px|false|false” content_button_active_custom_padding=”3px|35px|35px|4px|false|false” custom_padding=”|30px|40px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#0089b7″ background_enable_color__hover=”on” use_background_color_gradient__hover=”off” content_button_active_bg_color__hover=”#FFFFFF” content_button_active_bg_color__hover_enabled=”on|desktop” content_button_active_border_color__hover=”#FFFFFF” content_button_active_border_color__hover_enabled=”on|hover” content_button_active_icon_color__hover=”#15022A” content_button_active_icon_color__hover_enabled=”on|desktop” content_button_active_custom_padding__hover=”|35px||4px|false|false” content_button_active_custom_padding__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
[dipi_hover_gallery active_item_bg_color=”rgba(255,255,255,0.2)” item_bg_color=”rgba(255,255,255,0.2)” grid_gap=”10px” grid_width=”1200px” animation_speed=”1.5s” columns_tablet=”1″ columns_phone=”1″ columns_last_edited=”on|tablet” grid_width_tablet=”50%” grid_width_phone=”70%” grid_width_last_edited=”on|phone” grid_full_height_tablet=”off” grid_full_height_phone=”off” grid_full_height_last_edited=”on|tablet” grid_alignment_tablet=”center-left” grid_alignment_phone=”center-center” grid_alignment_last_edited=”on|phone” grid_padding_tablet=”0px|0px|0px|30px|false|false” grid_padding_phone=”0px|0px|0px|30px|false|false” grid_padding_last_edited=”on|tablet” _builder_version=”4.23.2″ _module_preset=”default” content_title_font=”Montserrat|700||on|||||” content_title_text_align=”center” content_title_text_color=”#FFFFFF” content_title_font_size=”14px” content_title_letter_spacing=”3px” content_title_line_height=”1.4em” content_desc_font=”Montserrat|300|||||||” content_desc_text_color=”#FFFFFF” content_desc_font_size=”39px” content_desc_line_height=”1em” positioning=”relative” width=”100%” height=”1000px” custom_margin=”||||false|false” content_title_font_size_tablet=”14px” content_title_font_size_phone=”12px” content_title_font_size_last_edited=”on|phone” content_desc_font_size_tablet=”32px” content_desc_font_size_phone=”24px” content_desc_font_size_last_edited=”on|phone” border_radii_item=”on|10px|10px|10px|10px” border_radii_active_item=”off|10px|10px|10px|10px” global_colors_info=”{}” item_bg_color__hover_enabled=”on|hover” item_bg_color__hover=”rgba(255,255,255,0.4)” item_bg_enable_color__hover=”on” active_item_bg_color__hover_enabled=”on|hover” active_item_bg_color__hover=”rgba(255,255,255,0.4)” active_item_bg_enable_color__hover=”on” theme_builder_area=”post_content”][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-02.jpg” title=”Wellness” content_text=”Skin Care” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”#FFFFFF” content_button_border_width=”0px” content_button_border_color=”#FFFFFF” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#0a0a0a” content_button_on_hover=”off” content_button_custom_margin=”20px||||false|false” content_button_custom_padding=”0px|30px|30px|0px|false|false” custom_padding=”30px|30px|30px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-01.jpg” title=”Body & Soul” content_text=”Oil Therapy” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”#FFFFFF” content_button_border_width=”0px” content_button_border_color=”#FFFFFF” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#0a0a0a” content_button_on_hover=”off” content_button_custom_margin=”20px||||false|false” content_button_custom_padding=”0px|30px|30px|0px|false|false” custom_padding=”30px|30px|30px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background_color__hover=”#0a0a0a” background_enable_color__hover=”on” use_background_color_gradient__hover=”off” background__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-03.jpg” title=”Beauty” content_text=”Exotic Facials” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”#FFFFFF” content_button_border_width=”0px” content_button_border_color=”#FFFFFF” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#0a0a0a” content_button_on_hover=”off” content_button_custom_margin=”20px||||false|false” content_button_custom_padding=”0px|30px|30px|0px|false|false” custom_padding=”30px|30px|30px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background_color__hover=”#0a0a0a” background_enable_color__hover=”on” use_background_color_gradient__hover=”off” background__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-04.jpg” title=”Experience” content_text=”Spa Weekend” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”#FFFFFF” content_button_border_width=”0px” content_button_border_color=”#FFFFFF” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#0a0a0a” content_button_on_hover=”off” content_button_custom_margin=”20px||||false|false” content_button_custom_padding=”0px|30px|30px|0px|false|false” custom_padding=”30px|30px|30px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background_color__hover=”#0a0a0a” background_enable_color__hover=”on” use_background_color_gradient__hover=”off” background__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-06.jpg” title=”Natural” content_text=”Body Products” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”#FFFFFF” content_button_border_width=”0px” content_button_border_color=”#FFFFFF” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#0a0a0a” content_button_on_hover=”off” content_button_custom_margin=”20px||||false|false” content_button_custom_padding=”0px|30px|30px|0px|false|false” custom_padding=”30px|30px|30px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background_color__hover=”#0a0a0a” background_enable_color__hover=”on” use_background_color_gradient__hover=”off” background__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-05.jpg” title=”Luxurious” content_text=”Your Wellbeing” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_content_button=”on” content_button_text_size=”20px” content_button_bg_color=”#FFFFFF” content_button_border_width=”0px” content_button_border_color=”#FFFFFF” content_button_use_icon=”on” content_button_icon=”$||divi||400″ content_button_icon_color=”#0a0a0a” content_button_on_hover=”off” content_button_custom_margin=”20px||||false|false” content_button_custom_padding=”0px|30px|30px|0px|false|false” custom_padding=”30px|30px|30px|30px|false|false” custom_css_main_element=”backdrop-filter: blur(10px);” global_colors_info=”{}” background_color__hover=”#0a0a0a” background_enable_color__hover=”on” use_background_color_gradient__hover=”off” background__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
Unique Module
Let visitors interact with your site
Improve the user experience of your Divi site with a truly unique and engaging module. The Hover Gallery module offers endless possibilities to display beautiful places, services, products, and anything else that can be presented with imagery.
[dipi_hover_gallery use_icon_active_style=”on” icon_image_padding=”|20px|0px|20px|false|false” icon_image_margin=”|0px||0px|false|false” icon_image_padding_active=”10px|20px|0px|20px|false|false” icon_image_margin_active=”|0px|0px|0px|false|false” active_item_bg_color=”rgba(0,0,0,0)” item_bg_color=”rgba(0,0,0,0.3)” columns=”4″ grid_gap=”0px” grid_width=”100%” grid_full_height=”on” grid_padding=”0px||0px||false|false” columns_tablet=”2″ columns_phone=”2″ columns_last_edited=”on|phone” _builder_version=”4.19.4″ _module_preset=”default” content_title_font=”Montserrat|700|||||||” content_title_text_color=”#FFFFFF” custom_content_button=”on” content_button_text_size=”12px” content_button_text_color=”#FFFFFF” content_button_bg_color=”rgba(255,255,255,0.22)” content_button_border_width=”0px” content_button_border_color=”RGBA(255,255,255,0)” content_button_font=”Montserrat|600||on|||||” content_button_icon=”$||divi||400″ content_button_custom_padding=”10px|30px|10px|30px|false|false” custom_content_button_active=”on” content_button_active_text_size=”12px” content_button_active_text_color=”#15022A” content_button_active_bg_color=”#FFFFFF” content_button_active_font=”Montserrat|600|||||||” content_button_active_icon=”$||divi||400″ content_button_active_custom_margin=”10px||10px||false|false” height_tablet=”” height_phone=”575px” height_last_edited=”on|phone” custom_margin=”||||false|false” border_width_all_item=”2px” border_color_all_item=”#FFFFFF” border_width_all_active_item=”2px” border_color_all_active_item=”#FFFFFF” global_colors_info=”{}” background__hover_enabled=”off|desktop” theme_builder_area=”post_content”][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-03.jpg” title=”Beauty” content_image=”https://www.divi-pixel.com/wp-content/uploads/2023/03/beauty-icons-white-18.svg” content_image_width=”120px” use_button=”on” button_text=”Learn More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” admin_label=”Beauty” _builder_version=”4.19.4″ _module_preset=”default” content_button_icon=”$||divi||400″ content_button_active_icon=”$||divi||400″ content_button_active_on_hover=”on” text_orientation=”center” custom_padding=”||||false|false” custom_css_main_element=”border-radius: 0;” global_colors_info=”{}” background_color__hover=”rgba(0,0,0,0)” background__hover_enabled=”off|desktop” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-01.jpg” title=”Exotic” content_image=”https://www.divi-pixel.com/wp-content/uploads/2023/03/beauty-icons-white-09.svg” content_image_width=”120px” use_button=”on” button_text=”Learn More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” admin_label=”Exotic” _builder_version=”4.19.4″ _module_preset=”default” content_button_icon=”$||divi||400″ content_button_active_icon=”$||divi||400″ content_button_active_on_hover=”on” text_orientation=”center” custom_padding=”||||false|false” custom_css_main_element=”border-radius: 0;” global_colors_info=”{}” background__hover_enabled=”off|desktop” background_color__hover=”rgba(0,0,0,0)” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-02.jpg” title=”Natural” content_image=”https://www.divi-pixel.com/wp-content/uploads/2023/03/beauty-icons-white-17.svg” content_image_width=”120px” use_button=”on” button_text=”Learn More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” admin_label=”Natural” _builder_version=”4.19.4″ _module_preset=”default” content_button_icon=”$||divi||400″ content_button_active_icon=”$||divi||400″ content_button_active_on_hover=”on” text_orientation=”center” custom_padding=”||||false|false” custom_css_main_element=”border-radius: 0;” global_colors_info=”{}” background_color__hover=”rgba(0,0,0,0)” background_enable_color__hover=”on” background__hover_enabled=”off|desktop” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/hg-woman-05.jpg” title=”Organic” content_image=”https://www.divi-pixel.com/wp-content/uploads/2023/03/beauty-icons-white-16.svg” content_image_width=”120px” use_button=”on” button_text=”Learn More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” admin_label=”Organic” _builder_version=”4.19.4″ _module_preset=”default” content_button_icon=”$||divi||400″ content_button_active_icon=”$||divi||400″ content_button_active_on_hover=”on” text_orientation=”center” custom_padding=”||||false|false” custom_css_main_element=”border-radius: 0;” global_colors_info=”{}” background_color__hover=”rgba(0,0,0,0)” background__hover_enabled=”off|desktop” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
[dipi_hover_gallery use_icon_active_style=”on” content_icon_color_active=”#FFFFFF” active_item_bg_color=”RGBA(255,255,255,0)” active_item_bg_use_color_gradient=”on” active_item_bg_color_gradient_stops=”rgba(255,255,255,0) 20%|#1ec8c3 100%” item_bg_color=”RGBA(255,255,255,0)” item_bg_use_color_gradient=”on” item_bg_color_gradient_stops=”rgba(255,255,255,0) 20%|#ffffff 100%” columns=”4″ grid_width=”100%” grid_full_height=”on” grid_padding=”20px|20px|20px|20px|true|true” active_item_bg_color_tablet=”RGBA(255,255,255,0)” active_item_bg_color_phone=”RGBA(255,255,255,0)” active_item_bg_color_last_edited=”on|tablet” active_item_bg_use_color_gradient_tablet=”on” active_item_bg_color_gradient_stops_tablet=”rgba(30,200,195,0.75) 20%|#1ec8c3 100%” item_bg_color_tablet=”RGBA(255,255,255,0)” item_bg_color_phone=”RGBA(255,255,255,0)” item_bg_color_last_edited=”on|tablet” item_bg_use_color_gradient_tablet=”on” item_bg_color_gradient_stops_tablet=”rgba(255,255,255,0.8) 19%|#ffffff 100%” columns_tablet=”2″ columns_phone=”1″ columns_last_edited=”on|phone” grid_width_tablet=”85%” grid_width_phone=”85%” grid_width_last_edited=”on|tablet” grid_full_height_tablet=”on” grid_full_height_phone=”on” grid_full_height_last_edited=”on|phone” grid_padding_tablet=”80px|20px|80px|20px|true|true” grid_padding_phone=”80px|20px|80px|20px|true|true” grid_padding_last_edited=”on|tablet” _builder_version=”4.19.4″ _module_preset=”default” content_title_font=”Cinzel||||||||” content_title_text_align=”center” content_title_text_color=”#0a4341″ content_title_font_size=”80px” content_desc_font=”Cinzel||||||||” content_desc_text_color=”#0a4341″ content_desc_font_size=”26px” content_title_active_text_color=”#FFFFFF” content_title_active_font_size=”110px” content_desc_active_text_color=”#FFFFFF” content_desc_active_font_size=”26px” custom_content_button=”on” content_button_text_size=”15px” content_button_text_color=”RGBA(255,255,255,0)” content_button_bg_color=”RGBA(255,255,255,0)” content_button_border_width=”0px” content_button_border_radius=”0px” content_button_font=”Cinzel||||on||||” content_button_use_icon=”off” content_button_custom_margin=”10px||||false|false” custom_content_button_active=”on” content_button_active_text_color=”#FFFFFF” height_tablet=”” height_phone=”” height_last_edited=”on|phone” custom_margin=”||-10px|||” content_title_font_size_tablet=”120px” content_title_font_size_phone=”50px” content_title_font_size_last_edited=”on|phone” content_desc_font_size_tablet=”30px” content_desc_font_size_phone=”20px” content_desc_font_size_last_edited=”on|phone” content_title_active_font_size_tablet=”120px” content_title_active_font_size_phone=”50px” content_title_active_font_size_last_edited=”on|phone” content_desc_active_font_size_tablet=”30px” content_desc_active_font_size_phone=”20px” content_desc_active_font_size_last_edited=”on|phone” global_colors_info=”{}” background__hover_enabled=”on|desktop” theme_builder_area=”post_content”][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/Hover-gallery-01.jpg” title=”1″ content_text=”
consectetur adipiscing
” use_button=”on” button_text=”Explore More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” _builder_version=”4.19.4″ _module_preset=”default” text_orientation=”center” custom_padding_tablet=”” custom_padding_phone=”20px||10px||false|false” custom_padding_last_edited=”on|phone” custom_css_content_title=”margin-top: 15px;” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#FFFFFF” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/Hover-gallery-04.jpg” title=”2″ content_text=”
consectetur adipiscing
” use_button=”on” button_text=”Explore More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” _builder_version=”4.19.4″ _module_preset=”default” text_orientation=”center” custom_padding_tablet=”” custom_padding_phone=”20px||10px||false|false” custom_padding_last_edited=”on|phone” custom_css_content_title=”margin-top: 15px;” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#FFFFFF” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/Hover-gallery-02.jpg” title=”3″ content_text=”
consectetur adipiscing
” use_button=”on” button_text=”Explore More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” _builder_version=”4.19.4″ _module_preset=”default” text_orientation=”center” custom_padding_tablet=”” custom_padding_phone=”20px||10px||false|false” custom_padding_last_edited=”on|phone” custom_css_content_title=”margin-top: 15px;” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#FFFFFF” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/Hover-gallery-03.jpg” title=”4″ content_text=”
consectetur adipiscing
” use_button=”on” button_text=”Explore More” button_url=”#” content_alignment=”center” content_v_alignment=”bottom” _builder_version=”4.19.4″ _module_preset=”default” text_orientation=”center” custom_padding_tablet=”” custom_padding_phone=”20px||10px||false|false” custom_padding_last_edited=”on|phone” custom_css_content_title=”margin-top: 15px;” global_colors_info=”{}” background__hover_enabled=”on|desktop” background_color__hover=”#FFFFFF” background_enable_color__hover=”on” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
[dipi_hover_gallery active_item_bg_color=”RGBA(255,255,255,0)” item_bg_color=”rgba(10,0,0,0)” grid_gap=”0px” grid_width=”90vw” gallery_animation=”ZoomIn” animation_speed=”0.8s” columns_tablet=”2″ columns_phone=”1″ columns_last_edited=”on|tablet” _builder_version=”4.23.2″ _module_preset=”default” content_title_font=”Montserrat|800|on|on|||||” content_title_text_color=”#FFFFFF” content_title_font_size=”4vw” content_title_active_text_color=”#f4bb00″ z_index=”0″ height=”100vh” height_tablet=”60vh” height_phone=”80vh” height_last_edited=”on|tablet” custom_margin=”||||false|false” content_title_font_size_tablet=”6vw” content_title_font_size_phone=”3vh” content_title_font_size_last_edited=”on|tablet” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/fitness-01.jpg” title=”Health” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” custom_css_main_element__hover_enabled=”on|hover” custom_css_main_element__hover=”cursor: default;” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/fitness-02.jpg” title=”Agility” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” custom_css_main_element__hover=”cursor: default;” custom_css_main_element__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/fitness-03.jpg” title=”Stamina” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” custom_css_main_element__hover=”cursor: default;” custom_css_main_element__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/fitness-04.jpg” title=”Strength” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” custom_css_main_element__hover=”cursor: default;” custom_css_main_element__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/fitness-05.jpg” title=”Vitality” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” custom_css_main_element__hover=”cursor: default;” custom_css_main_element__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/fitness-06.jpg” title=”Activeness” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” custom_css_main_element__hover=”cursor: default;” custom_css_main_element__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
Hover Gallery
Showcase product variations with style. With the Hover Gallery module, you can easily add product images and let users switch between them with just one click.
[dipi_hover_gallery item_bg_color=”#ffffff” columns=”1″ grid_gap=”20px” grid_width=”120px” grid_alignment=”center-right” gallery_animation=”FadeUp” animation_speed=”0.5s” grid_padding=”0px|30px|0px|0px|false|false” _builder_version=”4.19.4″ _module_preset=”default” content_title_font=”Montserrat||||||||” content_title_text_color=”#FFFFFF” content_title_font_size=”16px” content_title_line_height=”1em” height=”601px” height_tablet=”601px” height_phone=”351px” height_last_edited=”on|phone” custom_padding=”||||false|false” animation_style=”zoom” animation_duration=”1500ms” animation_intensity_zoom=”5%” animation_starting_opacity=”80%” border_radii_item=”on|100px|100px|100px|100px” border_color_all_item=”RGBA(255,255,255,0)” border_color_all_active_item=”#FFFFFF” box_shadow_style_active_item=”preset3″ box_shadow_horizontal_active_item=”-2px” box_shadow_vertical_active_item=”27px” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_hover_gallery_item use_item_style=”on” use_item_active_style=”on” item_bg_color=”#0083db” item_active_bg_color=”#008be8″ image=”https://www.fastudio.my/wp-content/uploads/2024/10/shoes-01.jpg” title=”Blue” content_alignment=”center” content_v_alignment=”top” _builder_version=”4.19.4″ _module_preset=”default” custom_padding=”35px||26px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item use_item_style=”on” use_item_active_style=”on” item_bg_color=”#e5a800″ item_active_bg_color=”#ed9200″ image=”https://www.fastudio.my/wp-content/uploads/2024/10/shoes-03.jpg” title=”Yellow” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_padding=”35px||25px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item use_item_style=”on” use_item_active_style=”on” item_bg_color=”#e20022″ item_active_bg_color=”#f20028″ image=”https://www.fastudio.my/wp-content/uploads/2024/10/shoes-02.jpg” title=”Red” content_alignment=”center” _builder_version=”4.19.4″ _module_preset=”default” custom_padding=”35px||25px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
[dipi_hover_gallery active_item_bg_color=”#FE461D” active_item_bg_image=”https://www.divi-pixel.com/wp-content/uploads/2024/02/transport-pattern-bg.svg” item_bg_color=”#FFFFFF” columns=”2″ grid_gap=”30px” grid_width=”100%” animation_speed=”1s” columns_tablet=”2″ columns_phone=”1″ columns_last_edited=”on|phone” grid_gap_tablet=”20px” grid_gap_phone=”20px” grid_gap_last_edited=”on|tablet” module_class=”dp-hg-demo” _builder_version=”4.23.2″ _module_preset=”default” content_title_font=”Inter Tight||||||||” content_title_text_color=”#000000″ content_title_font_size=”35px” content_title_letter_spacing=”-0.5px” content_title_line_height=”1.3em” content_desc_font=”DM Sans||||||||” content_desc_text_color=”#4D4D4D” content_desc_font_size=”18px” content_desc_letter_spacing=”-0.3px” content_desc_line_height=”1.2em” content_title_active_font=”Inter Tight||||||||” content_title_active_text_color=”#FFFFFF” content_desc_active_font=”DM Sans||||||||” content_desc_active_text_color=”#FFFFFF” background_color=”#f5f5f5″ custom_content_button=”on” content_button_text_size=”18px” content_button_text_color=”#a3a3a3″ content_button_bg_color=”RGBA(255,255,255,0)” content_button_border_width=”0px” content_button_border_color=”RGBA(255,255,255,0)” content_button_font=”DM Sans||||on||||” content_button_use_icon=”off” content_button_custom_margin=”0px||||false|false” content_button_custom_padding=”|||0px|false|false” custom_content_button_active=”on” content_button_active_text_size=”18px” content_button_active_text_color=”#FFFFFF” height=”auto” custom_padding=”30px|30px|30px|30px|true|true” custom_padding_tablet=”20px|20px|20px|20px|true|true” custom_padding_phone=”20px|20px|20px|20px|true|true” custom_padding_last_edited=”on|tablet” content_title_font_size_tablet=”25px” content_title_font_size_phone=”25px” content_title_font_size_last_edited=”on|tablet” content_title_letter_spacing_tablet=”0px” content_title_letter_spacing_phone=”0px” content_title_letter_spacing_last_edited=”on|tablet” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/transport-truck-01.png” title=”Street-Hauling Behemoth Trucks” content_image=”https://www.divi-pixel.com/wp-content/uploads/2024/02/dp-transport-orange-icon-03.svg” content_image_width=”60px” use_button=”on” button_text=”Explore further” button_url=”#” content_v_alignment=”top” _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”||140px||false|false” custom_padding_tablet=”||20px||false|false” custom_padding_phone=”||20px||false|false” custom_padding_last_edited=”on|tablet” custom_css_main_element=”border-radius:5px;||” custom_css_content_title=”width:60%;” custom_css_content_desc=”width:60%;” custom_css_active_thumbe_image=”filter: brightness(1000%);||” global_colors_info=”{}” custom_css_content_title_last_edited=”on|tablet” custom_css_content_title_tablet=”width:100%;” custom_css_content_desc_last_edited=”on|tablet” custom_css_content_desc_tablet=”width:100%;” custom_css_content_title_phone=”width:100%;” custom_css_content_desc_phone=”width:100%;” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/transport-airplane-01.png” title=”Heavenly Expeditions Aerial Marvels” content_image=”https://www.divi-pixel.com/wp-content/uploads/2024/02/dp-transport-orange-icon-06.svg” content_image_width=”60px” use_button=”on” button_text=”Explore further” button_url=”#” content_v_alignment=”top” _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”||140px||false|false” custom_padding_tablet=”||20px||false|false” custom_padding_phone=”||20px||false|false” custom_padding_last_edited=”on|tablet” custom_css_main_element=”border-radius:5px;||” custom_css_content_title=”width:60%;” custom_css_content_desc=”width:60%;” custom_css_active_thumbe_image=”filter: brightness(1000%);||” global_colors_info=”{}” custom_css_content_title_tablet=”width:100%;” custom_css_content_title_last_edited=”on|tablet” custom_css_content_desc_tablet=”width:100%;” custom_css_content_desc_last_edited=”on|tablet” custom_css_content_title_phone=”width:100%;” custom_css_content_desc_phone=”width:100%;” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/transport-ship-01.png” title=”Maritime Mastery Horizon Vessels” content_image=”https://www.divi-pixel.com/wp-content/uploads/2024/02/dp-transport-orange-icon-04.svg” content_image_width=”60px” use_button=”on” button_text=”Explore further” button_url=”#” content_v_alignment=”bottom” _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”140px||||false|false” custom_padding_tablet=”20px||||false|false” custom_padding_phone=”20px||||false|false” custom_padding_last_edited=”on|tablet” custom_css_main_element=”border-radius:5px;||” custom_css_content_title=”width:60%;” custom_css_content_desc=”width:60%;” custom_css_active_thumbe_image=”filter: brightness(1000%);||” global_colors_info=”{}” custom_css_content_title_last_edited=”on|tablet” custom_css_content_desc_last_edited=”on|tablet” custom_css_content_title_tablet=”width:100%;” custom_css_content_desc_tablet=”width:100%;” custom_css_content_title_phone=”width:100%;” custom_css_content_desc_phone=”width:100%;” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item image=”https://www.fastudio.my/wp-content/uploads/2024/10/transport-drone-01.png” title=”Skybound Couriers Drone Drop-offs” content_image=”https://www.divi-pixel.com/wp-content/uploads/2024/02/dp-transport-orange-icon-02.svg” content_image_width=”60px” use_button=”on” button_text=”Explore further” button_url=”#” content_v_alignment=”bottom” _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”140px||||false|false” custom_padding_tablet=”20px||||false|false” custom_padding_phone=”20px||||false|false” custom_padding_last_edited=”on|tablet” custom_css_main_element=”border-radius:5px;||” custom_css_content_title=”width:60%;” custom_css_content_desc=”width:60%;” custom_css_active_thumbe_image=”filter: brightness(1000%);||” global_colors_info=”{}” custom_css_content_title_last_edited=”on|tablet” custom_css_content_desc_last_edited=”on|tablet” custom_css_content_title_tablet=”width:100%;” custom_css_content_desc_tablet=”width:100%;” custom_css_content_title_phone=”width:100%;” custom_css_content_desc_phone=”width:100%;” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
Interactive module
Activate image on hover or click
Allow users to switch between images on hover or click. With the Divi Pixel Hover Gallery module, you can show the corresponding images after the user interacted with the grid item content.
[dipi_hover_gallery active_item_bg_color=”#ffb200″ columns=”2″ grid_gap=”0px” grid_width=”100%” grid_alignment=”bottom-center” gallery_animation=”ZoomInZoomOut” animation_speed=”0.6s” _builder_version=”4.19.4″ _module_preset=”default” content_title_font=”Poppins|700|||||||” content_title_text_color=”#FFFFFF” content_title_font_size=”22px” content_title_line_height=”1em” content_desc_font=”Poppins|600||on|||||” content_desc_text_color=”#FFFFFF” content_desc_font_size=”12px” content_desc_letter_spacing=”2px” content_desc_line_height=”1em” height=”630px” border_radii=”on|30px|30px|30px|30px” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_hover_gallery_item use_item_style=”on” use_item_active_style=”on” item_bg_color=”#f79400″ item_active_bg_color=”#f97400″ image=”https://www.fastudio.my/wp-content/uploads/2024/10/accordion-01.jpg” title=”Sarah Johnson” content_text=”
Creative Director
” content_alignment=”right” _builder_version=”4.19.4″ _module_preset=”default” custom_css_main_element=”border-radius: 0;” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_hover_gallery_item][dipi_hover_gallery_item use_item_style=”on” use_item_active_style=”on” item_bg_color=”#f7a400″ item_active_bg_color=”#f97400″ image=”https://www.fastudio.my/wp-content/uploads/2024/10/accordion-03.jpg” title=”Melissa Doe” content_text=”
Web Designer
” _builder_version=”4.19.4″ _module_preset=”default” custom_css_main_element=”border-radius: 0;” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_hover_gallery_item][/dipi_hover_gallery]
Powerful Features
Highly customizable module for Divi
The Hover Gallery module brings a variety of new possibilities for displaying content on Divi website. This module comes with advanced setting to style the grid layout and content.