Submitted 10 months ago

NFT-preview-card-component

Hassan Moataz•1,860

@hassanmoaa

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project?

Positioning the overlay image i took long time to figure out how to actually center it i didn't do it exactly as shown in the active-states image but i centered it. also with positioning the card.

Which areas of your code are you unsure of?

The overlay image position.

Do you have any questions about best practices?

Yes, please.

Community feedback

Daniel 🛸•44,310

@danielmrz-devPosted 10 months ago

Hello @hassanmoaa!

Your project looks great!

It's quite a challenge to add that hover effect properly. Here's how I did it, in case you wanna see other options:

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

Hassan Moataz•1,860

@hassanmoaaPosted 10 months ago

Thanks a-lot daniel, that would really help.

Definitely i’ll try it! @danielmrz-dev

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