NFT preview challenge

Community feedback

• 

  Acme Gamers•295

  @AcmeGamers

  Posted about 3 years ago

  Hey there 👋,

  Congratulations on nearly completing the challenge 🥳! You did great on centring the whole <main> tag using transform 😊.

  I would recommend changing the paragraph color to a bit lighter tone so people with eye issues can read it with ease. As far for the issue of hovering on the image that you were having, we use pseudo elements for that, things like ::before, ::after, :first-child, etc. However, pseudo elements does not work on <img> elements, so to cover that issue, we use the <div> tag.

  Solution (Spoiler Alert)

  HTML

  • Change your <img class='main-img'> element to <div class='main-img'> element
  • Yup, that's all for HTML! :D

  CSS

  Add a background image to the div

  .main-img {
      background: url("images/image-equilibrium.jpg");
      background-size: contain;
  
      min-height: 268px;    
      width: inherit;   // Inherits the available width
  
      border-radius: 20px;
  }
  

  Let's add the pseudo :before state on the div element

  .main-img::before {
      content: "";       // This is important, it won't work without it
      display: block;
  
      height: inherit;   // Inherits the div height
      width: inherit;    // Inherits the div width
  
      background: red;
      opacity: 0.6
  }
  

  If you reach here, it means you may have got a complete red square on your NF T image. But the question is, we want it to appear when it hovers, so try doing some research on how to add hover on ::before, if you figure it out, congrats, you are moving at a fast pace! :DDD

  If it still confuses you, drop a reply and I will be here to explain it with an easier method 😊. Hope to see your future success and designs, until then, best of luck!

  14

  Marked as helpful