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

Frontend Mentor - NFT preview card component solution

Kerby 200

@KeremBakan

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Ahmed Faisal 5,095

@afrussel

Posted

Hi, Overall good work as a newbie. Use cursor: pointer on image hover. More over you can this this below code for over effect with transition

 .card-view::after {
     --aqua: hsla(178, 100%, 50%, 0.5);
     content: url(./images/icon-view.svg);
     background: var(--aqua);
     position: absolute;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: all 0.25s ease;
}
 .card-view:hover::after {
     opacity: 1;
}

I would like to request you please take a look at my solution it may help you to find your issues.

Marked as helpful

1

Kerby 200

@KeremBakan

Posted

@afrussel Thanks for feedback.It is very 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