The best part? You don’t need to be an expert designer to achieve this effect. Whether you’re just starting with Divi or have been using it for a while, this guide will take you step by step through creating the Reveal Image Effect. By the end, you’ll know exactly how to add this simple but powerful feature to your website, giving it a fresh and engaging look. Let’s get started and make your website shine!

What Is the Reveal Image Effect?

The Reveal Image Effect is exactly what it sounds like—an image that smoothly reveals itself in a stylish, interactive way. It’s not just eye candy; it’s a Design technique for engaging visitors. With effects like these, you can draw attention of the visitors to specific elements, create dynamic visuals, and enhance your site’s overall user experience.

By adding the Reveal Image Effect in Divi theme, you can make your images come to life. It’s all about keeping your visitors curious and engaged. Plus, these kinds of effects give your website a modern, polished vibe.

How to Create a Reveal Image Effect in Divi

Let us show you how to make this magic happen! We’ll break it down into simple, actionable steps so you can follow along effortlessly.

Step 1: Access the Page

To begin, open the page where you want to create a reveal image. We recommend starting on a new, blank page to practice without impacting your live site’s performance. For this tutorial, we’ll be using a fresh, blank page. However, you can choose to work on an existing page or a premade layout; it’s entirely up to you.

Step 2: Create a Single Row and Column

In this step, we will create the structure for our reveal image effect.

1. Click on the Plus Icon button, as shown in the screenshot below.
2. Select the Single Row, Single Column option.

Step 3: Add a Background Gradient

After selecting a single row and single column, leave it blank without adding any module, as shown in the screenshot below.

1. Click on the Row Setting button (Gear Icon).
2. Go to the Background option in the Content tab.
3. Click on Add Background Gradient in the Gradient tab.
4. Choose two colors that match your website’s color scheme.

Continuing with the background gradient settings, scroll down to explore more gradient options:

1. Click on the Gradient Type and select the Radial option.
2. Click on Radial Direction and choose the Center option.
3. Set the Start Position to 50%.
4. Set the End Position to 18%, as shown in the screenshot below.
5. Click on the green Tick Marks button to save your changes.

Read More: How to Make Gradient Text in Divi Without Code

Step 4: Adjust Row Sizing

Reopen the Row Settings as discussed earlier, but this time, navigate to the Design tab to adjust the sizing.

1. Click on the Design tab.
2. Select Sizing, as shown in the screenshot below.
3. Toggle the Use Custom Gutter Width button to Yes.
4. Set the Gutter Width to 1.
5. Scroll down and set the Width to 20%.
6. Set the Max Width to 100%.

Apply a Hover Effect to the Width

In this step, we will add a hover effect that activates when the mouse hovers over the revealed image. This setting is also found in the Sizing section of the Design tab.

1. Select Sizing in the Design tab.
2. Hover your mouse over the Width option, and a Click Icon button will appear. Click on it, as shown in the screenshot below.
3. Select the Desktop option.
4. Keep the Width at 20%, as we set in the previous step.
5. Set the Maximum Width to 100%.

Now, we will modify the settings for the hover effect while keeping the desktop settings unchanged.

1. Click on the Click Icon button, as shown in the screenshot below.
2. Switch to the Hover option.
3. Set the Width to 100%.
4. Set the Max Width to 100%.

Set Height of the Row

Continuing the same step, we will now set the height for our reveal image effect.

1. Scroll down to locate the Height settings, as shown in the screenshot below.
2. Set the Min Height to 215px.
3. Set the Height to 100%.
4. Set the Max Height to 15vw.

Learn More: How to Equalize Column Heights in Divi

Apply Hover Effect to the Height

In this step, we will enable the hover Effect for the height, similar to what we did earlier.

1. Click on the Click Icon button to enable the hover effect, as we did in the previous section.
2. Set the Min Height to 300px.
3. Set the Height to 100%.
4. Set the Max Height to 15vw.

Step 5: Add a Shadow Effect

In this step, we will apply a box shadow effect to enhance the appearance of the revealed image, making it more attractive and visually appealing.

1. Click on the Design tab.
2. Navigate to the Box Shadow option.
3. Select the shadow effect displayed in the screenshot below or choose one that suits your preference.

Continuing with the shadow effect settings:

1. Click on the Shadow Color and choose a color that matches your website interface.
2. Click on the Box Shadow Position and select one, such as the Outer Shadow, as shown in the screenshot below.
3. Click on the Save button to apply the changes.

Step 6: Configure Advanced Settings for the Row

In this step, we will apply the settings from the Advanced tab of the Row Settings.

1. Click on the Advanced tab.
2. Click on Position.
3. Set the Horizontal Overflow to Hidden.
4. Set the Vertical Overflow to Hidden.

Step 7: Apply Transitions for the Row

In this step, we will configure the Transition settings in the Advanced tab of the Row Settings.

1. Open the Row Settings again and navigate to the Advanced tab.
2. Scroll down to find the Transitions section.
3. Set the Transition Duration to 0ms.
4. Set the Transition Delay to 0ms.
5. Click on the Save button to apply the changes.

Result Before Adding Text and Images Modules

The image below shows the results of our reveal image effect design. With the design complete, the next step is to add the Text Module.

Step 8: Insert the Text Module

In this step, we will insert the Text Module for the text.

1. Click on the Plus Icon button.
2. Search for Text in the search bar, as shown in the screenshot below.
3. Click on Text to insert the module.

Step 9: Modify Text in the Text Module

After adding the Text Module, your text will appear as normal text, as shown in the screenshot below. Since we need a heading text, we will change it to H2 in the Content tab.

1. Click on the Text in the Content tab.
2. Select all the text, remove it, and write the desired text (for example, “Click on Me”).

Modify Text in the Text Module (Continued)

1. Click on the Paragraph dropdown menu button.
2. Select Heading 2.

Now we are going to add color and style to the heading.

1. Click on the Design tab.
2. Click on Heading Text.
3. Select H2 in the Heading Text option.
4. Choose the desired Heading 2 Font.
5. Change the Heading 2 Font Weight to Bold.

Style the Heading Text (Continued)

1. Click on Center Alignment in the Heading 2 Text Alignment.
2. Click on the Heading 2 Text Color and select your preferred color.

Step 10: Apply Hover Settings for Heading Text

In this step, we are going to apply hover settings for the heading text to make it more dynamic. First, we will set the heading size for the desktop version, and then we’ll enable the hover settings to increase the text size on hover.

1. Click on the Desktop Icon button in the Heading setting option under the Design tab.
2. Set the Heading Text Size to 26px. This will define the default size of your heading text for desktop view.
3. Set the Heading 2 Letter Spacing to 0px, or adjust it depending on your design preferences.
4. Set the Heading 2 Line Height to 2.7em, or increase it if required based on your text design.
5. Now, hover your mouse over the Heading Text Size option, and you will see the Hover Icon button appear. Click on it to enable hover-specific settings.
6. In the Hover settings, set the Heading 2 Text Size to 36px, as shown in the below screenshot.

Learn More: How to Animate Letters for Unique Designs in Divi

To make your Reveal Image Effect even more eye-catching, you can add a color change on hover to your Heading 2. This small tweak adds a layer of interactivity and makes your design stand out even more.

1. Click on the Click Icon button of Heading 2 Text Color in the Design tab.
2. Set the color to transparent.
3. Click on the Tick Mark button to save.

Step 11: Adjust Heading Alignment with Spacing Settings

As you can see in the below screenshot, our Heading 2 text is currently positioned at the top of our module design. To make it visually balanced, we need to align it to the center of the square. For this, we will adjust the spacing settings within the row settings.

1. Click on the Row’s Setting (Gear Icon) button, as shown in the below image.
2. Click on the Design tab.
3. Click on Spacing from the available options.
4. Set Padding Top to 72px to push the heading text downward and align it properly within the square.
5. Click on the Tick Marks (Green Check) button to save the changes.

Step 12: Enable Hover Effect for Padding Top

In this step, we will apply a Hover Effect to the Padding Top setting, ensuring the heading text adjusts dynamically when hovered over. To achieve this, we will revisit the Spacing settings in the Design tab of the row settings.

1. Click on the Row’s Setting (Gear Icon) button.
2. Click on the Design tab.
3. Click on Spacing from the available options.
4. Enable the Hover Effect for Padding by clicking on the Click Icon (Hover) button next to the Padding Top option.
5. First, set the Desktop Padding Top to 72px (as previously set).
6. Click on the Hover Icon and set the Padding Top to 18px for the hover state.
7. Click on the Tick Marks (Green Check) button to save the changes.

Result After Adding Padding

The below screenshot showcases the outcome after applying Padding Top adjustments. This adjustment successfully centers the Heading 2 text within the design, achieving a visually balanced and aesthetically pleasing appearance.

By fine-tuning the Desktop Padding and Hover Padding, the text remains perfectly aligned while providing an engaging hover effect.

Step 13: Adding Images for the Reveal Image Effect

First, add a background image to the Text Module that will appear when the user hovers the mouse over the Text Module. (Note: when uploading images for the reveal effect, ensure the image size remains the same).

1. Click on the Setting Icon button of the Text Module.
2. Click on the Background option in the Content tab and enable the hover effect by clicking on the Click Icon button.
3. Click on the Image button, which is third in position, as shown in the image below.
4. Upload the image.

Now it’s time to add Images Module, which is the core purpose of creating our Reveal Image Effect. Sometimes, due to the applied Padding settings, the Plus Icon button might not be visible. But don’t worry—we can use an alternative method to add the image module.

1. Click on the Wireframe View button located in the Three Dotted menu at the bottom of the page.
2. Locate the Plus Icon button in the desired section (as shown in the screenshot below).
3. Click on the Plus Icon button to add a new module.
4. Search for “Image” in the Search Bar of the New Module.
5. Once the Image Module appears, Click on it to add it to your design.

Step 14: Uploading the Image for the Reveal Effect

Once you add the Image Module, it will automatically open, allowing you to upload your desired image for the Reveal Image Effect. Follow these steps:

1. Click on the Image Option in the Content Tab of the Image Module settings.
2. Click on the Add Image Button to open the Media Library.

In this step, we will upload the image that will be used for the Reveal Image Effect. Follow the steps below:

1. Upload or Select an Image from your Media Library that you want to use for the reveal effect.
2. Click on the Upload an Image button to add it to the module.

Step 15: Save the Uploaded Image

After successfully uploading your image to the Image Module, Ensure everything looks good, follow these steps to save your changes:

1. Click on the Tick Marks (Green Check) button to save your settings.

Step 16: Duplicate the Image Module

In this step, we will duplicate the Image Module to prepare the layout for the revealed image effect. We need three image modules along with one text module. However, if you want only images for the reveal effect, you will need four image modules instead.

1. Click on the Wireframe View button to switch to the wireframe layout, Locate the Image Module you just added.
2. Click on the Duplicate button (press two times) to create two additional copies of the module.

Step 17: Add Custom CSS to Column Settings

In this step, we will add a custom CSS code to the Column Settings to structure our reveal image effect properly.

1. Copy the following CSS code:
   display: grid;  

grid-gap: 10px;  

grid-template-columns: 20% 25% 25% 25%;  

1. Click on the Row Setting (Gear Icon) as shown in the below screenshot.
2. Click on the Column Setting (Gear Icon) to open the column-specific settings.
3. Navigate to the Advanced tab in the column settings Click on Custom CSS.

As you open the Custom CSS option, find the Main Element. Hover the mouse over the Main Element, and as the Click Icon button appears, click on it. Inside the Hover effect for Main Element, paste the CSS code.

1. Click on the Click Icon button to enable the hover effect.
2. Click on the Click Icon button in the Main Element, as shown in the below screenshot.
3. Paste the CSS code into the CSS box.
4. Click the Save button.

Final Result of Reveal Image Effect

In the GIF below, you can see the successful creation of our reveal image effect, showcasing a beautiful and visually appealing design. If you followed the steps and achieved the same result, congratulations on completing this project!

Final Thoughts

Adding a Reveal Image Effect to your Divi website is a simple yet impactful way to enhance user engagement and make your site stand out. By following this step-by-step guide, you’ve not only learned how to create a smooth and interactive transition but also how to personalize the effect to fit your unique style. Whether you’re aiming to captivate visitors with sleek visuals or add a modern touch to your website, this effect is a great way to achieve that. The best part? No advanced design skills are needed—just a bit of creativity and these easy instructions! Now, your website is ready to shine with a polished, professional look that will leave a lasting impression on your visitors. Keep experimenting with Divi’s versatile tools to explore even more design possibilities!

We hope you enjoyed learning how to create the Reveal Image Effect in Divi! By following these steps, you can add an engaging and dynamic touch to your website that will leave a lasting impression on your visitors. Stay tuned for more exciting tutorials, tips, and tricks to enhance your Divi web design skills. Don’t forget to subscribe to our updates and follow us on our social media channels to stay connected!

Read More: Creating a Hover Reveal Effect for Divi Blurb