An nft preview card component using html and css

👾Hello @Rioba-Ian, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

Here's how you can add the hover effect:

Container needed to position the overlay. Adjust the width as needed

.container {
  position: relative;
  width: 100%;
  max-width: 340px;
}

Make the image to responsive

.image {
  width: 100%;
  height: auto;
}

The overlay effect (full height and width) - lays on top of the container and over the image

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}

When you mouse over the container, fade in the overlay icon

.container:hover .overlay {
  opacity: 1;
}

The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }

When you move the mouse over the icon, change color

.icon-eye:hover {
  color:  hsl(178, 100%, 50%, 0.5);;
}

👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

✌️ I hope this helps you and happy coding!

Hello Ian Rioba, Congratulations on completing the challenge

• You can add the color over the image by creating an overlay using a psuedo-element like .classname::after or .classname::before for reference pseudo-elements.
• To add the border you can use border: 2px solid white you have used border: #fff; you haven't specified the border width specifying it will create the avatar image border needed.

Hope this helps.