NFT preview card component

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @JeanJackcss!

  Your project looks great!

  I have one comment and one suggestion:

  Comment

  📌 This project is not the best one to practice responsiveness. Use mobile first approach and once you finish the mobile version, the desktop version is pretty much finished too, because they are almost the same.

  Suggestion

  📌 It's quite a challenge to add that hover effect 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!

  0