---
title: "Tailwind zooming background images"
url: https://daily.dev/posts/tailwind-zooming-background-images-tewj-jv9j
source_url: https://h.daily-dev-tips.com/tailwind-zooming-background-images
type: article
source: "Hashnode"
author: "Chris Bongers"
published: 2021-02-18T07:00:04.133Z
updated: 2021-10-07T14:17:10.317Z
tags: ["webdev", "tailwind-css"]
reading_time: 2
upvotes: 10
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind zooming background images

**[Hashnode](https://daily.dev/sources/hashnode)** · [@dailydevtips](https://daily.dev/dailydevtips) · 2 min read · 10 upvotes · 0 comments

## Summary

Learn how to make a cool background zoom effect in Tailwind CSS. We will need cards that have an image and some text inside. Each card will look like this. We can add custom background images using the bg sub class. We then add transition and a transform to give it a nice animated effect.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://h.daily-dev-tips.com/tailwind-zooming-background-images>

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#tailwind-css](https://daily.dev/tags/tailwind-css)

[View this post on daily.dev](https://daily.dev/posts/tailwind-zooming-background-images-tewj-jv9j)