Crypto NFT Preview Card

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @XenoMee!

  Your project looks great!

  I see that you didn't add the hover effect on the image and it's indeed quite a challenge to create it 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.

  You can also add the hover effect on the title h1 as well as the name of the person.

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  1

  ---

  

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted 11 months ago

  Thanks @danielmrz-dev!

  I often forget to add hover/active effects on the elements after I finish the design. I just implemented the changes for the active states right now.

  I approached it in a different way to achieve the desired outcome. You can check out the code to see my version.

  Thanks again for the heads up!😊

  1