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 Page Responsive

@AymenBenYounes

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


I have made a single mistake because i didn't know how to apper the cyan color and the eye image at the moment when u click on the image , Can Someone help me with it , i would be happy to know the solution .Thank you and Have a Great Day !

Community feedback

eve 230

@Eve-Wangari

Posted

Hi there, you can use a transition. Include the view icon and position it where it should be when you hover, add a class with the background color setting the height as it should be when you hover, then set the opacity of the image to 0 set the height of the class with the background to 0 then do a transition opacity to 1 and height to full height. there's some positioning involved. You can try and see my solution here.... https://www.frontendmentor.io/solutions/responsive-and-flex-box-73nELprEIO

Good luck and happy coding.

Marked as helpful

0

@AymenBenYounes

Posted

Hello , Thank you for the help . I checked your solution and it was fantastic . Problem Solved !! Thanks again and have a great day

0
eve 230

@Eve-Wangari

Posted

@AymenBenYounes001 you are welcome. 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