nft-preview-card-component-main

Thisis what you have on in your CSS --Cyan: hsl(178, 100%, 50%). If you change this to --Cyan: hsla(178, 100%, 50%, 0.5); By adding the alpha you can lower the opacity (in this case to 50%). You can adjust the alpha as you please until you find a value that you are happy with.

Since you only want to see this on hover. Create a css rule and set the opacity to 0 to initially hide it. After that create another CSS rule to show it on hover and set the opacity to 1. This should solve your problem.

for example: to hide

.image { background-color: hsla(178, 100%, 50%, 0.5); opacity: 0; }

to show on hover

.image:hover { opacity: 1; }

First of all Congrats for your solution. The issue with your CSS is that you applied the opacity rule to the img element within .card .image img:hover. This rule is only triggered when the mouse hovers over the image itself, not the SVG shape (eye). As a result, even though the SVG displays correctly when hovering over the .card .image element, the image's opacity does not change as desired.

The issue:

.card .image img:hover {
opacity: .5;
}

A simple solution would be to move the hover effect to the container of the img element, which is the element with the class .image. By applying the hover effect to this container and targeting the img element inside it, you can achieve the desired opacity change.

Here's the correct CSS code:

.card .image:hover img {
opacity: 0.5;
}

With this modification, when you hover over the .card .image element, the img element inside it will correctly change opacity as intended. I hope I've been helpful to you, and keep up the great work!

Best regards,

David Ochoa. 😼