Replicate WP Show Post i

  • TWarrior
    May 18, 2026 at 5:50 am

    Hello,

    We’re trying to migrate some WP Show Posts blocks to GB v2.

    It seemed simple, but it’s turning out to be a headache.

    In this specific case, it involves
    -a block
    -with text
    -and a background image
    -where there should first be a transparent black overlay on the image
    -and when you hover over it, it changes to transparent green
    -the transition should be “smooth.”

    We’ve tried stretch links, overlays, etc., but nothing works. The best we’ve managed is to make the color change, but the smooth transition doesn’t seem to work.

    If we use “before”, the stretch link stops working…

    What are we doing wrong?

    We’ve included the link and instructions in a private message so you can see it.

    P.S.: Will the library’s templates ever be on par with the WP Show Post templates and their animations?

  • George
    May 18, 2026 at 6:56 am

    Hello,

    https://feedback.generatepress.com/

    The issue is that adding ::before to the stretch link target itself blocks pointer events, breaking the link. The fix is to apply the overlay pseudo-element to the wrapper element instead, with pointer-events: none so the link continues to work.

    Add this CSS to your container in the GB block editor (replace .gb-element-41643af6 with your actual element class if it differs):

    .gb-element-41643af6 {
  position: relative;
  overflow: hidden;
}

.gb-element-41643af6::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.gb-element-41643af6:hover::before {
  background-color: rgba(119, 188, 31, 0.67);
}

.gb-element-41643af6 .acao-tile-body {
  position: relative;
  z-index: 1;
}

    As for the template library — that’s a great suggestion for the feedback board at https://feedback.generatepress.com/, where the team tracks feature requests and you can see what’s already planned.

  • TWarrior
    May 18, 2026 at 8:34 am

    Thanks, I’ve done it (or so I think) and the stretchlink breaks.

    The blocks containing the proposed changes are now under the heading: ‘2nd attempt in GBv2’

  • Ying
    May 18, 2026 at 9:53 am

    Hi there,

    The 2nd attempt in GBv2 seems to be working, can you specify what’s not working?

    Let me know 🙂

  • TWarrior
    May 18, 2026 at 10:21 am

    Are you sure? The StretchLink isn’t working.

    (At least for us – we’ve tried it in incognito mode and on two different browsers.)

  • Ying
    May 18, 2026 at 10:36 am

    Select the container .gb-element-54b27e31, and set its width and height to 100%.

  • TWarrior
    May 19, 2026 at 9:44 am

    Thanks for your help, but that doesn’t solve the StretchLink issue—it just makes the button a little wider. Even at 100%, it doesn’t reach the edges of the container.

    P.S.: I’m surprised it’s so hard to replicate a WP Show Post element from so many years ago with the new GB v2 system.

  • Ying
    May 19, 2026 at 9:57 am

    It’s likely because your outer container has padding around it; removing that padding should make the button go to the edges.

    I checked your link again, but it does not show the sections in question anymore. Where can I see the section?

  • TWarrior
    May 19, 2026 at 1:27 pm

    The sample page is already avalaible

  • Alvind
    May 19, 2026 at 9:29 pm

    Hi there,

    Try applying the following fix in the 2 Attempt in GBv2 section:

    Remove the acao-tile Global Style from the .gb-element-41643af6 Container, then apply it to the .gb-element-54b27e31 Container instead.

  • TWarrior
    May 20, 2026 at 5:59 am

    Thanks for your help, but that way we lose the rounded border effect of the Tile.

    I thought it would be easier… but this is getting complicated!

  • George
    May 20, 2026 at 6:05 am

    Hi,

    The card border seems to be in place from my end in both 2 attempt in GBv2 and Failed copy attempt in GBv2 cards.

  • TWarrior
    May 20, 2026 at 6:12 am

    Yes, but if we do this, we’ll lose it:

    Remove the acao-tile Global Style from the .gb-element-41643af6 Container, then apply it to the .gb-element-54b27e31 Container instead.

    We didn’t expect it to be so tricky to replicate a WP Show Post entry! We miss WP Show Post styles!

  • George
    May 20, 2026 at 6:35 am

    Hi,

    The cards under the Failed copy attempt in GBv2 heading seem to be working ok, though?

  • TWarrior
    May 20, 2026 at 6:38 am

    The link doesn’t reach the edges of the container

  • Ying
    May 20, 2026 at 8:09 am

    Simply remove the global style .acao-tile from gb-element-41643af6, and add it to gb-element-54b27e31.

    Then set border-radius to the loop item block, and set its overflow-x and overflow-y to hidden.

Viewing 16 posts - 1 through 16 (of 18 total)
1 2
  • You must be logged in to reply to this topic.