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

flexbox, margins, and the use of a padding of 41.3% for the hover img

@adrian-reina-391

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 a huge Problem, i don´t know how to show the Eye SVG icon in the middle of the image and wit the right size, I need help in this part

Community feedback

Kirthika B 160

@Kirthika-B

Posted

Hi, It would be best if you used position for that particular part. Example: .card { position: relative; } .Equilibrium { width: 100%; display: block; } .eye_view { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } I hope now you'll be able to get it done.

Marked as helpful

0

@adrian-reina-391

Posted

@AylaShiny thanks, that it works, but I also need that the entire area of the background image to be highlighted when I do hover, I mean that when the eye svg icon is shown, it must also appear a green background with some opacity when I add a bigger size, it grows the eye icon too, now I added a 100% padding and its almost what I need, but the border-radius is not applying and the vertical size still bigger of what I need//, after all, I tried with another padding, of 41.3% it looks almost perfect, it works but I didn't understand why I have to do all of that

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