What is the best way to create this effect using a normal img element in Webflow instead of setting the image as a background and adding an overlay?

To create an overlay effect on a normal <img> element in Webflow (instead of using a background image), you can wrap the image and overlay in a container with positioning. Here's how to achieve it:

​

1. Create the Structure

​

• Add a Div Block and name it something like Image Wrapper.
• Inside the wrapper, add an Image element with your desired img source.
• Still inside the wrapper, add another Div Block that will act as the Overlay.

​

2. Style the Wrapper

​

• Select the Image Wrapper and apply the following styles:
• Position: Relative
• This will allow absolutely positioned children (like the overlay) to be placed relative to this wrapper.

​

3. Style the Overlay

​

• Select the Overlay Div and apply:
• Position: Absolute
• Top, Right, Bottom, Left: Set all to 0 (this will make it fill the entire wrapper)
• Background Color: Choose the overlay color (e.g., black with 50% opacity using rgba(0,0,0,0.5))
• Z-Index: 2 (Make sure it's above the image)
• Optional: Add a hover state if you want dynamic effects, like fade-in.

​

4. Layering the Image

​

• Select the Image element and:
• Position: Relative (if needed)
• Z-Index: 1 (to place it below the overlay)

​

5. Optional: Add Hover Effects

​

• Select the Overlay and in the Hover state:
• Adjust opacity (e.g., from 0 to 1) to make it appear on hover.
• Add a transition on the overlay for opacity to smooth the effect.

​

Summary

​

To recreate an overlay effect on a normal image element in Webflow, use a relative-positioned wrapper div containing the image and an absolutely-positioned overlay div. Control layering with z-index, and use opacity and transitions for interactive effects like hover fades.