How to change image on hover using tailwind css?

@ryleigh 

To change an image on hover using Tailwind CSS, you can use the group and group-hover utility classes along with the transition and transform classes for a smooth transition effect.

Here is an example code snippet to change the image on hover:

1
2
3
4

<div class="group relative">
  <img src="image1.jpg" alt="Image 1" class="block w-full h-auto group-hover:hidden transition-transform" >
  <img src="image2.jpg" alt="Image 2" class="block w-full h-auto group-hover:block hidden transition-transform transform scale-0" >
</div>

In this code snippet:

1. The main container div has the group class to enable the group-hover effect.
2. The first image (image1.jpg) is displayed by default and will be hidden on hover using the group-hover:hidden class.
3. The second image (image2.jpg) is initially hidden and will be displayed on hover using the classes group-hover:block.
4. The transition-transform class adds a smooth transition effect when the images change on hover.
5. The transform scale-0 class scales the second image down to 0 size, and it will scale up to normal size on hover.

You can customize the image paths, transition duration, and other styling properties to achieve the desired hover effect using Tailwind CSS utility classes.