Some styling with TailwindCSS

A first experience using TailwindCSS out of React

In order to achieve the hover effect over the image, I used an external div with the Equilibrium picture and another div containing the cyan background and the eye as its sibling, in order to avoid that the eye suffers the effects of the opacity applied over the div, as follows:

<div class="
    w-[279px] h-[279px] relative 
    lg:w-[274px] lg:h-[274px]
">
    <img class="rounded-xl lg:rounded-lg" src="images/image-equilibrium.jpg" alt="Equilibrium, by Jules Wyvern">
    <div class="
        absolute h-full w-full left-0 top-0 opacity-0 transition-opacity 
        hover:opacity-100 hover:cursor-pointer
    ">
        <div class="h-full w-full bg-cyan opacity-50 rounded-xl"></div>
        <img class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2" src="images/icon-view.svg" alt="Icon view. An eye.">
    </div>
</div>

I don't think this was an elegant choice and I would appreciate some tips about it.