NFT Preview

Community feedback

• 

  Walter Folk•200

  @walterfolkPosted about 2 years ago

  The active states are already added, I completely forgot to make them. Thanks for your suggestions.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Walter, You have done a good work! 😁

  Some little tips to improve your code:

  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @walterfolk, 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!

  0