Design comparison
Solution retrospective
So basically during the workflow of the project, I had issues with the color overlay on the NFT image when a mouse is hovered. I was able to use the hover feature for the texts, but with the image, the color wasn't just popping.
I might have taken the wrong approach, but I am thankful for any help that I can get.
Community feedback
- @Dana-HongPosted almost 2 years ago
Hey Ekwugha,
Good job with this challenge. To add a hover effect, what you can do is nest the NFT image inside of a
<div>
, along with another<div>
. You can then add your view image and background colour to this<div>
.Something like this:
<div class="feature-image"> <img src="*path_to_nft_image*" alt=""/> <div class="hover-overlay"> <img src="*path_to_view-icon*" alt=""/> </div> </div>
Two pieces of general advice I would give:
- Avoid the use of type selectors like
p
, andimg
, unless you are using them to override defaults. You can read more here. - Avoid the use of id selectors, since they are not reusable, and lead to a lot of repeated code. They're also better for scalability. You can read more here .
Hope this helps!
1 - Avoid the use of type selectors like
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