Team Cards Layout with Background Hover Effect (Updated with GenerateBlocks 2.0)

A while back, I shared a way to create a team card section where the photo zooms in smoothly on hover. Since then, GenerateBlocks 2.0 has launched, and it’s changed how we build this effect. Some things are more powerful, but also a little more complicated.

Here’s how to recreate that same effect in the updated builder.

What We’re Building

We’re aiming for a team section with three cards. Each card includes:

• A photo that zooms in on hover
• The person’s name and job title
• A readable overlay with a soft gradient background
• A nice drop shadow on the text container

Let’s walk through it.

Initial Setup

I’m working on the page where I previously built this, so I can reference the finished layout. I’ve got a container with an inner container set to a three-column grid layout.

Inside the grid, I add three containers—one for each team member. We’ll build one card and then duplicate it.

Adding the Team Image

It might look like the photo is a background image on the container, but that’s not the case. Kyle Van Deusen from The Admin Bar explained why you should avoid that—it’s bad for accessibility.

Instead, we’ll add the image as a real image element. That way, we maintain accessibility and get better control over styling.

So inside the card:

1. Add an image (in this case, a photo of a woman)
2. Below the image, add another container to hold the content
3. Inside that container, add text for the job title (e.g., “Owner”) and name (e.g., “Jane Wilson”)

I apply a subheadline class to the job title and make the name an H3. I also zero out the bottom margin of the subheadline to tighten things up.

Making the Image Behave Like a Background

To make the image behave like a background, I use a global class called image-background, based on CSS shared by Kyle Van Dusen.

I’ve already added the CSS to my child theme and starter site. So I just apply the image-background global class to the outer container.

If you have styles enabled in the builder, you’ll see the image behave like a background.

Adjusting Container Sizing and Radius

Initially, the outer container collapses to the size of the content. To fix this, I set a minimum height of 400px.

Then I add a border-medium class for a rounded edge. Since the image is on top, we can’t see the border radius yet—but setting overflow-x and overflow-y to “clip” on the outer container fixes that (you’ll find it under Position). Now the image respects the border radius.

Positioning Text at the Bottom

Next, I need the text to sit at the bottom of the card.

1. Set the inner content container to 100% height
2. Set the layout to flex (column direction)
3. Align items left and justify content to the bottom

This places the name and job title at the bottom-left corner of the card.

Then I add a padding-medium global class to the content container to keep the text away from the edges. If you don’t use helper classes, you can add padding manually under the Spacing tab.

Making Text Readable with a Gradient Background

To help the white text stand out, I add a gradient background to the content container:

1. Add a new background
2. Choose “Gradient”
3. Set the bottom color to black
4. Set the top color to black at 0% opacity
5. Set the angle to 360°
6. Adjust the gradient position so the transparency fades out around 40%

Now the gradient fades up from black and makes the text readable.

Creating the Hover Zoom Effect

Here’s how to make the image zoom in on hover:

1. Select the outer container
2. Choose the “Hover & Focus” selector from the options, then append that with img
3. Create an effect: “Transform” → “Scale” → 1.1

This targets the image inside the container when the container is hovered. The zoom is subtle.

To make the transition smooth, I add another selector:

1. Selector: img
2. Create an effect: “Transition”
3. Set easing to “ease-in-out”, duration 0.5s

Now, when I hover over the card, the photo smoothly zooms in and out.

Duplicating the Cards and Final Adjustments

Once the first card is complete:

1. Delete the placeholder containers
2. Duplicate the completed card twice
3. Update each card with a new image, name, and title

I also adjust the grid:

• Add 1rem for column and row gaps under Grid Layout
• Set the mobile grid template columns to one column

This ensures proper spacing across breakpoints.

Final Touches and Accessibility Considerations

After updating the content, everything looks great on desktop, tablet, and mobile without further tweaks.

This method keeps accessibility in mind. Because we’re using actual image elements—not decorative backgrounds—the team members are represented properly. The image-background class helps us visually position the image like a background, while maintaining accessibility.

Using global classes like border-medium, padding-medium, and image-background makes this build faster and more consistent. Once you get the hang of this workflow, you can create these kinds of sections even quicker than what I showed here.