Team Card Design with Cool Hover Effect using GenerateBlocks

One of the best ways to continue improving your web design skills is by replicating layouts or designs you find inspiring on other websites. Recently, while browsing the Tailwind UI components, I came across a team section in their Studio template. The section features a subtle zoom effect on the person’s image and a nice overlay with the name and title. I decided to see if I could replicate this design using GenerateBlocks.

Step 1: Setting Up the Layout

To start, I created a “Meet the Team” page on my demo site. The layout has four columns—one for the title and three for the team members.

1. Add a Container: Begin by adding a container, followed by an inner container.
2. Padding: Apply padding to the outer container, with values of 80px for top and bottom and 20px for left and right.
3. Column Setup: Use Flexbox to create the column layout. Add two more containers inside the inner container. Set the first container’s width to 25%, and for the second container, set the Flex grow property to 1. This will ensure the second container fills the remaining space.

Step 2: Adding the Team Members

With the basic layout in place, it’s time to build out the team members’ profiles.

1. Add Containers: Inside the second container, add three more containers—one for each team member.
2. Flexbox Setup: Set these new containers to Flexbox and assign each a width of 33% to span the entire container equally. Add a 20px column gap for spacing.
3. Background Images: Upload and set the background images for each team member container. Add a 20px border radius to soften the edges of the images.

Step 3: Adding Text Overlay

Now, it’s time to add the team member names and job titles.

1. Add Headline Block: Inside each container, add a headline block for the name. Use the Google Font “Prompt” to match the design inspiration. Set the text color to white and adjust the font size.
2. Job Title: Duplicate the headline block and update it with the job title. Adjust the font size and weight to create a distinction between the name and the title.
3. Align Text: To ensure the text is aligned properly, set the Flex direction to column within each container and adjust the bottom margin for tighter spacing.

Step 4: Styling and Effects

To complete the design, add some final touches like gradients and hover effects.

1. Add Gradient Overlay: In the background settings, add a black gradient from the bottom to the top to create a smooth overlay effect. Set the gradient to stop at 50% to avoid covering the entire image.
2. Hover Effects: Apply a grayscale filter to the background images and set up a hover effect that scales the image slightly (e.g., 1.1). Use a transition effect for smooth hover animations.
3. Z-Index Fix: Ensure that the text remains visible over the gradient by setting the z-index to 2.

Step 5: Responsive Design

Finally, make sure the layout looks good on both mobile and tablet devices.

1. Mobile Layout: Change the Flex direction to column for the container holding the columns to ensure the content stacks vertically on mobile. Adjust the width of each container to 100% for full-width display.
2. Tablet Layout: Maintain a three-column layout on tablets, but make sure the containers are set to 33% width with appropriate row gaps for spacing.

Final Thoughts

This design effectively replicates the Tailwind UI team section using GenerateBlocks. It’s a clean, modern layout with subtle hover effects that add a touch of interactivity without overwhelming the user. Flexbox was key in controlling the layout and alignment, particularly in keeping the text and images in the desired positions.