NFT preview flexbox and overlay

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Greetings, Espartaco Rodríguez! 👋

  Good effort on this challenge! Your solution looks pretty good! 😀

  About the overlay, the best approach that I know and I follow is the following,

  • First, wrap the Equilibrium image element with an anchor tag. It has :hover and/or :active states, so it should be an interactive element. 😉
  • Second, use pure CSS to create the overlay by using pseudo-element and background properties. Use background-image to show the eye icon and use background-color to show the cyan background.
  • Third, remove the div and the eye icon from the HTML itself.
  • Now, the HTML looks cleaner. Nice work!

  If you have any questions regarding the overlay, feel free to ask them. I would be happy to help you. 😄

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey NCr4wl3r good job completing this challenge. Keep up the good work.

  Your solution looks great however I think the font weight of the card is supposed to be heavier and the currency unit is supposed to be inline.

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0
• 

  Jose Sanchez•380

  @JRS-DeveloperPosted over 2 years ago

  Hello, about the z-index, it's better if you use the hover effect in the class "div-overlay", if you put as initial state on "div-overlay" the opacity: 0% and on hover you can increase the the opacity to 30% again. And with that you can avoid future problems with z-index like with mobile navbars.

  .div-overlay {
      // ...rest of code
      opacity: 0%;
      // ...rest of code
  }
  
  .div-overlay:hover {
     opacity: 30%;
  }
  

  Marked as helpful

  0