Posts Element: Overlay Link

Hi,

we have several options to link to our posts within the posts element, be it on the post title, the image, read more … but if you use an overlay, the behavior is not entirely intuitive / user-friendly from my point of view.

  1. If you apply the link to the image, it won’t work with an overlay because the link is obscured by the overlay (makes sense).

  2. You can add the link to the post title within the overlay - ok, but it doesn’t cover the entire overlay (I think it’s easier / pretty intuitive when the entire element is clickable, not just the title element).

There are two (or maybe more) ways to solve this:

a) Add an option like “stretched link” to the image link or post title link.
b) Add a link field to the overlay.

Yes, i can resolve a) with some lines of CSS (see code below), but a simple “go for it and stretch the link” option would be a lot easier for most bricks users.

root .overlay-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

root .overlay-inner .dynamic a:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

Here is a video where you can see it in action: https://vimeo.com/579062751/75932a8ed2
What do you think?

Keep it up,
Regards
timmse

3 Likes

That is useful, thanks!

1 Like

This solution is helpful! If you’re looking to have the title/content to display in the center of the overlay, you’ll need to add flexbox:

root .overlay-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}