Consider reversing the Cover Image "Background Opacity" slider.

[kjellr]

Currently, if you adjust the Cover Image "Background Opacity" slider, it adjusts the opacity of the background color layer. 0% means there is no color overlay and 100% means there is a full color overlay.

In order for this to make sense, you must consider the black color to be the "background" of the cover image. I'd argue that this is confusing, and that users will consider the image to be the background, since it sits behind the text. Some informal testing of people around me has confirmed this, but I'd be interested to hear if there's more official testing one way or another.

When users consider the image to be the background, the background opacity slider values are the opposite of what you'd expect: when they're set to 0, the image is at full opacity, and when they're set to 100%, the image is invisible.

Suggested Solution

I suggest that the slider be reversed, so that 0% means the image is completely transparent (with a fully-opaque color overlay), and 100% means that the image is fully opaque (with no color overlay).

Alternatively, we should be more specific in the language of the slider to make it clear it's talking about the color, not the image.

[ZebulanStanphill]

I think the slider should be renamed to Background Color Opacity, and you should be able to choose the overlay color. Alternatively, it could be named Background Overlay Opacity.

I still think the Cover Image should just be a Reusable Block template consisting of a Container block with a nested Heading or Paragraph block and having preset settings.

See also:

• Add Block: Section #4900
• Implement nesting in cover image block #5452
• Make it easier to insert a Reusable block as a standalone block (using the Reusable block as a template) #8403

[mtias]

Let's make a task for adding a background color option. Then we'd have a panel called "Overlay" which can have opacity and color as options.

[kjellr]

Let's make a task for adding a background color option. Then we'd have a panel called "Overlay" which can have opacity and color as options.

Opened #9329 and included a mockup. I suggest we keep this issue open until that's closed though. 👍

[kjellr]

Removing Needs Design Label, since there's a mockup of a solution over in #9329.

[enriquesanchez]

I believe this has already been fixed (#9329 and #10291).

Please feel free to reopen if needed.