-
“Hi guys
Context: I am currently in the process of rebuilding my site’s ‘Dispatch’ style layout. I want to move away from the older ‘WP Show Posts’ plugin and recreate the exact same functionality and look using only native GenerateBlocks Pro Query Loops. As I am not a professional developer, I am trying to achieve this purely through the plugin’s UI settings to avoid maintaining a large block of custom CSS.
I have some questions regarding the Query Loop I’m building with GenerateBlocks Pro.
I managed to fix the spacing issues by removing the ‘Minimum Height’ settings, but I need help with two specific design elements:
1. Hover Zoom Effect: I want the featured image to slightly zoom in (scale up) when the user hovers over the container. How can I set this up natively using the ‘Effects’ or ‘Transitions’ panel in GB Pro?
2. Gradient Overlay for Readability: I need a dark gradient overlay (bottom to top) behind the post title and date to ensure legibility. What is the best way to apply a linear gradient as a background overlay within the GB Pro container settings?
I want to ensure a clean, native setup that mirrors the original Dispatch style as closely as possible.
Thank you for your guidance!
Stephan
-
Hi Stephan,
To achieve the effect you’re looking for, the current Query Loop layout needs to be adjusted—specifically how the featured image is implemented.
Right now, the featured image is applied as an inline background style on the container. When you apply a zoom effect in this setup, the entire container (including the heading and text) scales, not just the image.
To zoom only the image, the featured image needs to be:
– Rendered as an Image block, or
– Applied via a pseudo-element (e.g. ::before) that can be targeted independentlyThis way, the zoom effect can be applied to the image alone without affecting the text content.
If restructuring the layout isn’t an option, let me know and we can explore an alternative workaround.
-
Hi Alvind
Thanks for the explanation regarding the zoom effect. Restructuring the entire Query Loop right now feels a bit too complex for my current workflow, so I’ve decided to skip the zoom effect for now.
However, I still urgently need a solution for readability. Since the featured images are currently applied as background styles on the containers, I need a way to add a gradient overlay (darkening the bottom area) or a subtle blur/brightness filter behind the post title and date.
Could you please provide the CSS or the specific settings within the Container Block to apply such a gradient overlay specifically to these background images? I want to ensure that the white text remains perfectly legible regardless of how bright the photo is.
Looking forward to your suggestion for this ‘alternative workaround’.
Thanks a lot
Stephan
-
I need a way to add a gradient overlay (darkening the bottom area) or a subtle blur/brightness filter behind the post title and date.
Sure, this can be achieved directly using the block settings.
Select the Post Template block inside the Query Loop, then open the Backgrounds panel and apply the settings as shown here:
-
Hi Alvind
Thank you for the screenshot. However, those specific settings do not seem to exist in my current interface, i just found a gradient settings in the Background Advanced section
When I apply a gradient in the panel of the Post Template, the gradient covers the entire block, including the Heading and Date. This makes the text look muddy or partially obscured, which is not what I’m looking for.
I need the gradient to act as an overlay behind the text but stay ‘below’ the actual text elements, so the white font remains crisp and clear.
Thanks a lot
Stephan
-
the gradient covers the entire block, including the Heading and Date
Can you try setting the heading and date’s
positiontorelativeandz-indexto1?
Let me know if this helps! -
that does the trick – thanks Ying!
-
Glad to hear that 🙂
- You must be logged in to reply to this topic.