SOLVED: Overlay for background image is not working when styling with a class

Bugs
1

Bricks Version: 1.3.6
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: nvmy.co & s.jt.my (both same)

Hi!
I noticed something suspected a bug.

I noticed that when styling with a class, I added a background image, then added the overlay effect but the overlay is not working.

Can someone here replicate the same?

Here is the screencast:

I tried styling with a class first(not working), then I styled with ID(it worked).

See if you find the same situation?

[Please describe in as much detail as possible how we can replicate this bug]

3

Hi Jornes,

I can confirm this as a bug. The .bricks-overlay-wrapper is missing when using a class.

Probably there is a much better approach when using classes to add an overlay to your images using pseudo-elements.

Add a container with a background image (on the ID, so you can use your overlay class on different elements).
Add a class “.overlay” to your container.
Add a pseudo Element of “::before” to .overlay.
Set the following on the pseudo element (you can set the styles in the builder, there is no need for custom CSS):

.overlay::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color (or gradient applied to the background): rgba(0, 153, 204, .8);
}

Voila! Now you can use .overlay on every container element :slight_smile:
Unfortunately, I just realized that there is a problem using custom classes with pseudo elements on other elements (like the image element, for example). So in the meantime, you can use the .overlay class only on a container if you’ve added it to a container :sweat:

Best regards,
timmse

1 Like
4

Thank you @timmse !

So this bug will be fixed.

5

Hi Jornes,
overlays attached to a class are working in Bricks 1.3.7 :partying_face:

Best regards,
timmse

1 Like
6

@timmse Thank you Timmse!

7

it seems still bugged on 1.6.2
Image Overlay only possible on ID, as soon you use class, the overlay settings disappears.

8

Hi @deboo ,

Thanks for reporting the issue, could you elaborate more on the issue?
I am able to set Overlay on the background image when using CSS class.
Maybe a simple video recording will help us to identify the problem.

Regards,
Jenn

9

try this:

  • put an image into a section
  • link the image to lightbox zoomed version
  • apply an overlay color to the image
    until now it’s all as should be.
    Now give a class to the image, and voilĂ , overlay settings vanish.
10

Hi Dee,

Thank you so much.
Now understand it’s the Image overlay option inside the Image element missing.

image
image919Ă—806 32.1 KB

Appreciate your time.

I have recorded this in the bug tracker.

Regards,
Jenn

1 Like
11

Hi Jornes,
We’ve fixed this bug in Bricks 1.7 beta, now available as a manual download in your Bricks account: Account – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

2 Likes
12

Thank you for the update @timmse
Great work with this update! A lot of fixes!

1 Like