How To Change Image On Hover Using Tailwind Css

By TailTemplate Team

How to Change Image on Hover using Tailwind CSS

It is not possible to swap images on hover state for <img> tag with pure Tailwind CSS.

However, this is a trick for swapping images on a hover state using background images. This will produce the same effect.

Instead of using <img> tag, we can make use of the background property and swap it on hover.

You can do it similarly like the example below:

<div class="bg-[url('/images/avatar.jpg')] hover:bg-[url('/images/about.jpeg')] bg-cover w-48 h-48"></div>


A project by  StaticMaker.

This site is proudly powered by Tailwind CSS and Laravel Livewire