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>

</body>