Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT card component with HTML & CSS

@tomiwaorimoloye

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Could anyone suggest how I could implement a responsive hover action on the image. I couldn't find a good enough approach to make a responsive hover action without hardcoding the values for each screen size. I don't want to use this hardcode approach cuz I feel it's not a practical way to deal with situations like this.

Community feedback

Byron 2,180

@byronbyron

Posted

You could have a link around the image, and attach a :before or :after pseudo element to it that's positioned absolute and has a top, right, bottom and left of 0. (Don't forget to put a position: relative; on the link as well)

Then style it up with the semi transparent blue and the eye background image.

Hide it by default with display: none; and then display: block; it when hovering over the link around the image.

That would be my suggestion. Hope that helps!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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