Cover Block: Add Hover Reveal style

[alaczek]

Is your feature request related to a problem? Please describe.
Hovering over an image to reveal text/link is a popular web design pattern. It would be great if the Cover block enabled that by adding dedicated block style.

The screenshot comes from Dalston theme ( source ) where "Hover reveal" is added as a custom style to the Cover block.

Here's how it looks like in the editor:

The behaviour is the same in the editor and on the frontend -- with "Hover reveal" style applied, the text shows up when hovering over an image. Clicking on the text makes it editable. Not sure if that particular behaviour in the editor would cause accessibility issues or not, but I'm sure we can iron out that part, if we agree that having this style added would be useful.

[jasmussen]

Nice ticket! This seems like a fine enhancement to add to the Cover block in my opinion. I'm assuming that focus also reveals?

[alaczek]

I'm assuming that focus also reveals?

Do you mean when focusing with a keyboard? It does not in Dalston, although it definitely should.

[truchot]

I think it's possible to do this animation with the block cover and a bit of CSS, no?

[jasmussen]

Do you mean when focusing with a keyboard? It does not in Dalston, although it definitely should.

Yep, I was thinking that if you tab into the block, the content should be revealed. Or even if you click on the hoverable area, that sets a lingering focus there, this should keep the content visible even as you mouse out and only disappear when you click somewhere else.

To phrase it even simpler, instead of :hover { ... }, I'm suggesting :hover, :focus { ... } ;) — though we might have to throw in some :focus-within 😱

I think it's possible to do this animation with the block cover and a bit of CSS, no?

Absolutely. I read this ticket as posing the question: does this have so much value that it should be a toggle in the block, as opposed to require custom CSS?

[karmatosed]

I love this idea as feels like a great addition to the cover image block. Let's get this a 'needs dev' label and move into that.

[krzakx]

Hey, do we have any update on that?

[Draino]

Has this been implemented yet?