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 preview card component

#animation
Joel Leon 100

@iJoel23

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


Hey everyone 🐣!

I found difficult the hover over the first image. If there's a better way to do it, would be very helpful to know.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Joel Leon! 👋

Before taking care of the hover effect, I recommend getting the HTML right first by wrapping the Equilibrium image with an anchor tag. It has interactivity, so it should be wrapped by an interactive element.

Now for the hover effect, I recommend using a pseudo-element and background properties. So, there is no HTML markup for the overlay and the eye icon.

You can start by creating the pseudo-element from the anchor tag. Then, use the pseudo-element to show eye icon by using background-image and background-position. For the background color, use rgba or hsla to control the opacity of the color.

For your reference, you can see @IlnaraAckermann's solution.

Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution

I hope this helps. Happy coding!

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