Target child element with hover in Tailwind CSS

user_15832431 0
Viewed 2484

I have a parent div with a child image element inside of it. When I hover over the parent div I want my child element's src to change to a different source. But I'm struggling to find a way to do this with tailwind.

    <button className="flex flex-col items-center justify-center w-40 h-40 mx-12 transition ease-in-out rounded-full shrink-0 text-primary hover:text-white hover:bg-light">
        <div className="relative flex items-center justify-center w-20 h-20 mb-2">
            <Image src={icon} alt={`${title} icon`} />
        </div>
        <span className="text-xl text-center">{title}</span>
    </button>

enter image description here

Image should turn white (different source) on hover. How to do this with Tailwind?

tailwind-css reactjs
1 Answers

Here's one solution that lets you set up two images in advance and switch between them using group-hover.

<button class="relative flex flex-col items-center justify-center group w-20 h-20 m-12 rounded-full text-primary">
  <img class="absolute group-hover:invisible w-20 h-20 rounded-full" src="https://www.fillmurray.com/100/100"/>
  <img class="absolute invisible group-hover:visible w-20 h-20 rounded-full" src="https://www.fillmurray.com/g/100/100"/>
  <span class="absolute top-10 text-xl text-center text-green-500 group-hover:text-white">title</span>
</button>

You can test it in the Tailwind sandbox here: https://play.tailwindcss.com/CCvbvcYNVv

user_2874760
Related