Hover effect text appears GP + GB

Hi there,

what hover effect ? Do you have a link i can see ?

LINK: https://www.loom.com/share/2216e82704cb40029e644a5f2add9f9c

That specific design would require Custom Development.
If you use GenerateBlocks Pro, then you can use the Effects options to Translate a Containers position and its opacity to create something similar.

Hi David. I now have a GB pro. Can you help me to get that animation using GP + GB pro?

Thanks!

Are you using a Query Loop Block to display posts ? Or is that content static ?

Static

Simple overview, to begin with paste this code into the editor for a quick and simple mockup:

<!-- wp:generateblocks/grid {"uniqueId":"68c5bdf8","columns":1,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"f4d3f597","isGrid":true,"gridId":"68c5bdf8","width":100,"widthMobile":100,"bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/600/400"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"innerZindex":1,"isDynamic":true,"blockVersion":2,"useTransition":true,"transitions":[{"state":"normal","target":"self","customSelector":"","timingFunction":"ease","property":"all","duration":0.5,"delay":""},{"state":"normal","target":"customSelector","customSelector":".inner-block","timingFunction":"ease","property":"all","duration":0.5,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"normal","target":"customSelector","customSelector":".inner-block","translateY":"210"},{"type":"translate","state":"hover","target":"customSelector","customSelector":".inner-block","translateY":0}]} -->
<!-- wp:generateblocks/container {"uniqueId":"6b3684fc","minHeight":300,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"backgroundColor":"rgba(255, 255, 255, 0.51)","isDynamic":true,"blockVersion":2,"className":"inner-block","transitions":[],"transforms":[]} -->
<!-- wp:generateblocks/headline {"uniqueId":"ac451d77","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":""} -->
<h2 class="gb-headline gb-headline-ac451d77 gb-headline-text">Some text over the image</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"df819abf","backgroundColor":"","marginTop":"150"} -->
<h2 class="gb-headline gb-headline-df819abf gb-headline-text">Some text hidden</h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

Its a single column grid, once you built one column you can just create duplicate columns.

So in the Grid Column Container we have a background image ( set to Pseudo Element ).
And it has 2 x Transform > Translate Effects that are set to Target the Custom Selector of .inner-block
Inside that Container we have another Container that has our content, and that has an Advanced > Additional CSS Class of inner-block

So the when you hover over the parent container it applies the transform translate styles to the inner-block container.

Thanks David! That worked perfectly! You are a genius!

Glad to be of help :)