NFT preview card component CSS and HTML only

Solution retrospective
I tried so much to add the colour for the image on hover but I really felt lost with it
I got some ideas to apply it with pseudo-element but could not find my way yet for that.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Saran-73
Hi ,you can do that by creating a div with same image size and create(:before) pseudo element for that div give it backround color then centre the icon inside then make it position absolute to place it above the img and use the opacity and z- index property. To understand about not affecting the opacity of the icon while reducing the background opacity ,take a look at my project or the video by (coder coder) in youtube title"how to make background image transparent in Css" will help.
Marked as helpful - @Joshua-Farr
Hey Hossam!
I just completed this challenge today too - the easiest thing that I found was using an overlay with opacity 0 for the image in the cyan color and then changing it to opacity 1 on hover. Hopefully that helps!
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord