NFT preview card component

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @578shivam!!

  Your project looks great!

  It's quite a challenge to add that hover effect with the overlay image properly. Here's how you can do it:

  HTML

  <img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
    <div class="icon">
      <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
    </div>
  

  CSS

  .pic {
     width: 300px;
     background: url('images/icon-view.svg') center center no-repeat;
     background-color: $Cyan-hover;
     background-size: cover;
     margin: auto;
     border-radius: 10px;
  }
  .icon {
     display: grid;
     justify-content: center;
     align-items: center;
     position: absolute;
     opacity: 0;
     background-color: $Cyan-hover;
     width: 300px;
     height: 300px;
     border-radius: 10px;
  }
  icon:hover {
     opacity: .5;
     cursor: pointer;
  }
  

  Just don't forget to change the class names to match yours.

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  0
• 

  Bishal Singh Deo🎮•1,440

  @Bishalsnghd07Posted 9 months ago

  Hi, @578shivam 👋

  Congrats for completing this challenge 🎉 and amazing work👏

  There, is a few adjustments needed in the semantic as well as in CSS basics:

  1)Never, forget to give min-height in body of your web page, if you did not doing this, your main layout of web page will take the height of your given child components. So, it gives disaster solution sometime, your layout may break also. Smaller project it is not effecting, but when you work with larger project there will be many component, in there if you did not give min-height in your body tag then your layout will break. For Example: If your First component having height: 40vh and your last component having height:90vh. So, in this case, your layout size will be showing 90vh, but actual size of layout is 100vh and due to giving this height in child component only, your layout will take 90vh and original height of layout is 100%(100vh). In this case your layout will break, what you will be done in that, that's why it is good practice to give min-height:100vh in body of your web page.

  2)Heading levels are like this👉h1, h2, h3, h4, h5 & h6. Always follow the heading levels, never use h2 directly without using h1, <h1> is the most important and <h6> will be least important. And h1 should be used only once in one project and it will be the main header of your component. By doing this your semantic HTML will improved and code quality too.

  Other than that great job and hope this tips will help you ahead in your projects too!

  Happy Coding❤️

  Marked as helpful

  0