In a div, there is an <img> tag and a <button> tag. I used group in the className of the div and group-hover:opacity-0 in the img tag, and it worked correctly. However, when I applied group-hover:top-1/2 to the <button> tag, it did not work as expected.
<div className="group relative bg-white">
<img
src={restaurant}
alt="An image from a website."
className="group-hover:opacity-0"
/>
<button
className="absolute -top-96 group-hover:top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
LEARN MORE
</button>
I added the provided code to the tailwind.config.js file.
module.exports = {
// ...
variants: {
extend: {
top: ['group-hover'],
}
},
}
How can I resolve this issue?