NFT preview card component CSS and HTML only
Design comparison
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.
Community feedback
- @Saran-73Posted almost 3 years ago
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 helpful0 - @Joshua-FarrPosted almost 3 years ago
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 helpful0@HossamGoudaPosted almost 3 years ago@Joshua-Farr Thanks for your idea it's working fine.
0
Please log in to post a comment
Log in with GitHubJoin 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