NFT preview card with pure HTML & CSS

Hello Carson, congratulations dor the challenge.

I same double about how to change the color of the SVG on hover one month ago when I did this same challenge.

I know three ways to solve that :

1. Using the property filter in the svg and applying the value for the color you want, in this case theres an online tool that calculate the exact color. Link below:

CSS Filter Color: https://codepen.io/sosuke/pen/Pjoqqp

1. Create two svg one white and the other with the hover color and swap them using a pseudo-element like :before/:after.

2. Working with SVG and converting to a path to them apply the property fill and change its color. Useful articles below:

CSS TRICKS how to svg color change: https://css-tricks.com/change-color-of-svg-on-hover/

How to convert SVG to path https://stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file#:~:text=If%20you%20have%20a%20complex,them%20into%20a%20single%20path.

In this case I've used the CSS filter generator because its easier to apply, you can check my solution to see how I did it.

Solution: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

I hope ir helps you, feel free to ask anything 👏✌️

You should use a div on your Image div then set your image div as a relative position and the other div as an absolute position then you have to bg color to as specified and change the opacity so that it can give you that transparent look Note: use the hover property for the first div and set its visibility property as visible and when not hover set to hidden.