NFT preview challenge

Community feedback

• 

  Acme Gamers•295

  @AcmeGamersPosted over 2 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!

  Marked as helpful

  1

  ---

  

  Kariman Medhat•170

  @KarimanMedhatPosted over 2 years ago

  @AcmeGamers At first thank you for your help it's super useful, I did what you said at first but I created <div class=main-img><img></div> which apperce it is wrong so now I'm gonna try your way, about the paragraph color I used the same color given in style.guide...Thank you again.

  1

  

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  @KarimanMedhat You're welcome. Also it is just <div class="main-img"></div> only, after you apply the CSS styles I gave above, it will work. Give it a try and simply reply if you face any issues, I will help you out 😊

  0

  

  Kariman Medhat•170

  @KarimanMedhatPosted over 2 years ago

  @AcmeGamers I used it in my last project and it works so well thank you very much...

  1

  

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  @KarimanMedhat You're welcome, I'm glad to hear that it helped you out 😊

  0