That’s why we did that in the previous step.įrom here it is very straightforward, enable the Image overlay and all the options will be visible. The overlay tab will only be visible when you add a link to your image. Then expand the Link tab and place either a link or a dummy link into it.Īfter that navigate to the Design tab and expand the Overlay tab. Just place an image module on your page and add an image to it. This is very easy to do and does not require any custom code. Under the background color, you can change your own color. Now place a code module under your image and copy/paste the following code into it: īackground-color: rgb(233 75 0 / 50%) /* set you overlay color */ Place the following CSS class: divi-image-overlay-bg. Place an image in it and go to the Advanced tab. Place an image module on your page and open it. If you just want to add transparent background color on top of your image follow these steps.
Here is a sneak peek of what we are going to create. In this tutorial, I’ll show you how you can quickly turn any of your images into eye-catching image overlays using Divi’s built-in tools! Not only does this technique add visual interest, but it also helps draw attention to links and calls to action. This tutorial covers everything you need to know!Īre you looking to make your Divi website stand out against the competition? One of the best ways to do that is with image overlays-a background image combined with a background layer containing text and other elements.
Learn how to build prototypes with interactions and animations.Learn how to create an engaging Divi image overlay that will keep your visitors interested in your site. Select the (1) transition and any additional settings, including (2) direction, (3) easing, and (4) duration. In the Animation section, customize how the overlay will appear.Add background behind overlay: Check this setting to add a background color behind the overlay and in front of the current frame.Close when clicking outside: Check this setting to dismiss the overlay when a user clicks outside the overlay's dimensions.Choose from seven default options or set a position manually. Position: The location of the overlay relative to the original frame.There are a few aspects of an overlay that you can customize: For this interaction, you want this to be the overlay frame. Figma determines the Destination based on where the connection ends.Select what kind of interaction will trigger the animation.There are three aspects of the interaction, the trigger, action and destination. Now you can customize the interaction.Click on the prototype node and drag a connection to the frame you want to become the overlay.
Hover over the object you want to start the overlay from.Click the Prototype tab in the right sidebar.Overlays can be triggered from any object, layer, group or frame. You create an overlay when you define the interaction of a connection. Learn more in the Swap between overlays section. Tip! You can create interactions between overlays using the Swap overlay action.