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

I had difficulties with the hover main img color

@razh23398

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 had many difficulties with the placement of the cubes. In addition, it was very difficult for me to make the hover for the main image. Until now I can't figure out how to make the icon of the eye white.

Community feedback

xmat 160

@mati0165

Posted

Hi, i will tell you how to change the icon of eye to white. U have it white, but u change the opacity of every element in your div, so the opacity is also on the eye. For fix the problem with eye not being white there is an easy solution

  • For first u have to your background be transparent, not div as u had in your code, for that u will have to add 50% as ur 4th value to hsl:
.overlay {
background-color: hsl(178, 100%, 50%, 50%);
} 
  • then u change ur opacity at hover to 1
.container:hover .overlay {
  opacity: 1;
}

I think that solved your problem.

Marked as helpful

1

@razh23398

Posted

@mati0165 wow, you are the best ! it did solve the problem.

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