NFT Preview Card styled using CSS

Hi Jovaughn Bennett, there are many ways to archive like this effect, one of them is to use opacity:0 in both the icon and bg overlay and than change that to opacity:1 in hover .

I actually took some time to look at your code, and I take some note heplfully you find some of them useul.

you can set this values hoverimg {opacity : 0}, .equimg{cursor: pointer;} , .equilibrium{width: 100%} , .icon{opacity:0} and than

.hoverimg:hover {
  opacity: 0.8;
}
.hoverimg:hover .icon {
  opacity: 1;
}

also check for spell for some classes, Hope this help and happy coding!

Hey! I also struggled with the hover image effect. I used a pseudo element to get it done, so I use the hover selector and then use the :after selector on that very same selector to create the pseudo element as the image is hovered. Then it's just a matter of setting the position absolute on the pseudo element and on the parent (I hope I explained myself correctly).

The more experienced developers helped me out with this on the Slack community in the #help channel, if you need help you should join, I really recommend it!

Eu utilizei POSITION - ABSOLUTE nas imagens. Depois é só organizar quem fica por cima ou por baixo com Z-INDEX.