How to Animate Text on Hover using Only GenerateBlocks 2.0 Styles Panel

Recently, I was working on a client project and came up with a solution for a card style that animates text on hover and adds a color overlay. In this post, I’ll walk you through exactly how I built it using GenerateBlocks.

Setting Up the Layout

I’ve already got a container with an inner container. Now I’m adding three more containers inside and setting the layout to a 3-column grid so we’re working with smaller cards instead of full-width ones.

Add Global Styles

• Apply a global style for padding (medium): This adds 1.5rem of padding all around.
• Apply a global style for border (medium): This adds a 0.5rem border radius.

Add the Background Image

Next, I added a background image from my media library and set it to cover. I also set a minimum height of 250px on the card container to give us room to work.

Add the Headline and Center It

• Add a headline block and change it to an H3.
• Set the text to something like “This is a title.”
• Make the container a flex column layout, and center the content both vertically and horizontally.
• Remove the bottom margin on the headline to keep it perfectly centered.

Since I plan to use a dark blue overlay, I’ll choose white as the text color for readability.

Animating the Headline on Hover

We’ll push the headline outside of the visible area and animate it back into view on hover.

Create the H3 Selector

1. Go to the container block’s selectors.
2. Create a new selector for h3.

This targets the H3 inside this container. Now:

• Add a transform effect: translate Y-axis 275px to move the headline down.
• Under Position, set overflow-x and overflow-y to hidden on the container, so the text is not visible until hover.

Add the Hover Overlay

Switch to the hover state for the container selector.

• Add a background gradient overlay with a dark blue shade.
• Re-add the background image under the gradient (I find it doesn’t always inherit automatically).
• Swap the image and gradient so the gradient sits on top.

Now, when you hover, you’ll see the dark overlay effect.

Animate the Text Back Up

To animate the H3 on hover:

1. Create a new selector using :hover > h3.
2. Add a transform effect: translateY(0px) to bring the text back into position.
3. Add a transition:
   • Duration: 0.33s
   • Ease: ease-in-out
   • No delay

Now the headline will slide into view on hover.

Smooth the Exit Animation

When hover ends, we want the text to animate back down instead of disappearing instantly.

• Go back to the main h3 selector.
• Add the same transition:
  • Duration: 0.33s
  • Ease: ease-in-out
  • No delay

Add Opacity for Fade Effect

To enhance the effect, add an opacity change.

• On the h3 selector: Set opacity to 0%.
• On the :hover > h3 selector: Set opacity to 100%.

This allows the headline to fade in and out smoothly during the hover state.

Preview and Wrap-Up

After saving, view the front-end. On hover, the card animates the text up with a fade-in and shows the overlay. On mouse-out, it fades out and slides back down.

This is a simple way to create a stylish hover animation using the GenerateBlocks UI. With the new selector system, it can be confusing to know what to target—but this approach worked great on a recent client project, and I wanted to share it with you.