nft preview card component

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.