Submitted 4 months ago

nft preview card component

Daniel•260

@Flashdaniel

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'm proud to be able to get the solution close to the design.

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

It wasn't easy to design and display the eye-shape on the middle of the product image on hover. I used tricks to get it close to the design.

.eye-shape {
  position: relative;
  display: var(--deplay-eye, none);
  margin: 0 auto;
  width: 43px;
  height: 43px;
  background-color: var(--White);
  border-radius: 70% 6px;
  transform: rotate(45deg);
  z-index: 2;
}

.eye-shape::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 9.4px;
  left: 9px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 6px solid #0ea3a3f5;
  background-color: var(--White);
}

/* use to place the eye-shape above the card_image */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

/* card_image */
.grid-item1 {
  grid-column: 1;
  grid-row: 1;
}

/* eye-shape */
.grid-item2 {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

/* use as a hack to display the eye-shape block on hover */
.card__image-link:hover {
  --deplay-eye: block;
}

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

I know there are better ways on how to go about this. Any feedback is well appreciated. THANK YOU.

Community feedback

Mahmood•1,510

@MahmoodHashemPosted 4 months ago

Hello there

Congratulations on completing the challenge!*

You did a fantastic job, and there's no need to feel any different. However, I suggest exploring a different method that requires less code.

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

.image{
      position: relative;
    }

    .overlay{
      position: absolute;
      top: 0; 
      display: none; 
      justify-content: center;
      align-items: center;
      background-color: hsla(178, 100%, 50%, 0.398);
      width: 100%;
      height: 100%;
      border-radius: 14px;
}
    .image:hover .overlay{
        display: flex;
        cursor: pointer;
    }

Great Job overall

Marked as helpful

Daniel•260

@FlashdanielPosted 4 months ago

Thank you @MahmoodHashem.

Mahmood•1,510

@MahmoodHashemPosted 4 months ago

@Flashdaniel You're welcome. If you found that helpful, please consider marking it 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