WP Tailwind Hero

Favorite this tutorial

In this tutorial, we’ll walk you through creating overlapping images in Gutenberg using Tailwind CSS. This is a common design technique that can enhance the visual appeal of your website. We’ll cover the necessary settings, adjustments, and styling to achieve the desired effect. Let’s dive in!

Getting Started

Before we start, ensure you have preloaded the necessary images to save time. Here’s a quick overview of the initial setup:

1. Load Style Guide and Gutenberg Autocomplete: These tools will help streamline the process.
2. Prepare Images: Preload the images you’ll use for this tutorial.

Step 1: Uploading Images

1. Zoom In: Start by zooming in to get a closer look at your workspace.
2. Default Settings: Use the default settings provided in Gutenberg.
3. Navigate to Sample Page: Go to the sample page where you’ll be working.
4. Upload Images: Open the sidebar and upload your images. Multiply and replace as needed.

Step 2: Adjusting the Layout

Once the images are uploaded, you’ll need to make some adjustments:

1. Save Your Work: Save your progress to avoid losing any changes.
2. Overlap the Circles: To create the overlapping effect, follow these steps:
   • Wrap in Flexbox: This will help in managing the layout efficiently.
   • Add Block Spacing: Solve the margin issue at the top by adding block spacing.
   • Change Aspect Ratio: Adjust the aspect ratio to ensure all images appear as squares.

Step 3: Styling the Images

Now, let’s style the images to make them look polished and professional:

1. Set Uniform Height and Width: Ensure all images have the same height and width for uniformity.
2. Apply rounded-full: To achieve a circular look, add the rounded-full class. If it doesn’t work initially, remember it’s because you’re adding it to the wrapper, not the image.
3. Add Overflow Hidden: Use overflow-hidden on the wrapper to ensure the rounded corners are visible.

Step 4: Overlapping the Images

To create the overlapping effect, follow these steps:

1. Use Parent Element for Margins: Instead of adding negative margins to each image individually, apply them to the parent element.
2. Adjust Space: Use space-x to manage the spacing between the images. Add !important if necessary to override default settings.
3. Manipulate Parent Element: Adjust the parent element’s properties to ensure the images overlap correctly and scale proportionally.

Favorite this tutorial