NFT Preview Card - Next.js and Tailwind CSS

I did something like this:

<div class="container-image">
                <div class="main-image"></div>
                <div class="color-image"></div>
            </div>

.container-image {
  position: relative;
  cursor: pointer;
  width: 100%;
  max-width: 18.75rem;
  height: auto;
  border-radius: 5px;
  overflow: hidden;
}
.main-image {
  background-image: url("images/image-equilibrium.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
  min-height: 18.75rem;
  width: 100%;
}

.color-image {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 18.75rem;
  height: auto;
  background-image: none;
}
.color-image:hover {
  background-image: url("images/icon-view.svg");
  background-color: var(--cyan);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20% 20%;
  opacity: 0.5;
  transition: background-color ease-in-out 0.3s;
}

create a cyan color as a rgba . the last value is used to set the opacity. Use that value for the bg and your eye should show up properly

'nft-cyan-hover':'hsl(178, 100%, 50%, 0.5)'

This will give you the transparency effect while keeping the eye fully visible on hover

Thought i would comment since your post helped me figure out the hover effect