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

@ChamodJ

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 do not have any idea how to do hover effect on image in this challenge. I hope someone can help me.

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

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