Submitted 4 months ago

nft preview card

JessB74•50

@JessB74

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of my progress so far. Although there's room for improvement, I think am moving forward in the right direction.

What challenges did you encounter, and how did you overcome them?

I could not display the eye icon over the image when you hover. I found a few solutions for this however, I didn't want to copy code I didn't understand so I didn't complete that task. Also, I tested the responsiveness and noticed it shifts more to the left on smaller devices. There may be some slight difference between my solution and the design however I've attempted so I hope it counts.

What specific areas of your project would you like help with?

I would appreciate any general feedback, especially about how to show the eye icon when you hover over the image. Also, I don't know how professional my code looks concerning the format. I think it has no structure or it's maybe not very organized. Any tips and tricks about that will be appreciated as well.

Community feedback

Daniel 🛸•44,250

@danielmrz-devPosted 4 months ago

Hello there!

Congrats on completing the challenge! ✅

Your project looks great!

It's quite a challenge to add that hover effect with the overlay image properly. Here's how you can do it:

HTML

<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
  <div class="icon">
    <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
  </div>

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Just don't forget to change the class names to match yours.

I hope it helps!

Other than that, you did an excelent job!

Marked as helpful

Please log in to post a comment

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