Tailwind zooming background images

You might be familiar with this pretty cool background zoom effect, you hover a card, and the image zooms towards you?

Well, today, you will learn how to make this yourself in Tailwind CSS!

The end result will look like this:

HTML Structure

Let's start by looking at the HTML structure and how we would format this.

We will need cards that have an image and some text inside. Each card will look like this.

<div class="card-zoom">
  <div class="card-zoom-image"></div>
  <h1 class="card-zoom-text">CAR</h1>
</div>

As you may have spotted, I'm not using inline classes since we will be re-using these blocks multiple times.

Adding custom background images in Tailwind CSS

Before we continue, let's see how we can add custom background-images to our Tailwind CSS.

Open up your tailwind config, and add an extend option for backgroundImages.

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        beetle:
          "url('https://custom.image/name.jpg')"
      },
    },
  },
  variants: {},
  plugins: [],
}

That is how we can add custom background images for our Tailwind config. We can then use these images using the bg sub class.

<div class="card-zoom-image bg-beetle"></div>

You can see that we use the bg prefix with the name we put in our Tailwind config file.

Styling the cards

Now let's get working on adding some generic styling for our cards.

We will use the @apply rule to make sure we only use Tailwind classes.

The first element is the card-zoom class. It's the main wrapper for the image and the text.

.card-zoom {
  @apply relative flex items-center justify-center m-3 overflow-hidden shadow-xl w-60 h-60 rounded-2xl;
}

This will make sure everything inside the card-zoom div is centered, and it has rounded corners with a nice shadow effect.

The next element will be the image inside. This has to be an absolute class since we will be zooming the whole div on hover.

.card-zoom-image {
  @apply absolute w-full h-full transition-all duration-500 ease-in-out transform bg-center bg-cover;
}

As you can see, we make it absolute and the full size of the parent element. We then add transition and a transform to give it a nice animated effect later on.

Then we have the text left. This again must be an absolute element since we will be animating this as well.

.card-zoom-text {
  @apply absolute text-5xl font-black transition-all duration-500 ease-in-out transform scale-150 text-gray-50 opacity-60;
}

Adding the hover effect

One of the reasons I went with the separate classes is since we want to add the hover on the parent class.

So once we hover the card-zoom, the inner image and text element should start animating.

We can add these animations using the following classes.

.card-zoom:hover .card-zoom-image {
  @apply scale-150;
}
.card-zoom:hover .card-zoom-text {
  @apply scale-100;
}

This will make sure the image zooms to be bigger, and the text will zoom smaller, giving it a cool background zoom effect.

If you want to check out the full demo, check out this Tailwind CSS Playground demo

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter