NOT-BUY-NFT

Community feedback

• 

  lisztomania23•170

  @lisztomania23Posted about 1 year ago

  Hello,

  I have some feedback for you:

  The view effect should be triggered when hovering over the img. However, you've set the max-width: 20%, limiting its activation area. Additionally, due to the offset positioning, the effects appear quite different from what they should be.

  Put both img and view within a <div> container class="nft", remove .view:hover and .img:hover and try using this code:

  .nft{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  
  .view {
      cursor: pointer;
      position: absolute;
      opacity: 0;
      transition: opacity 0.5s, background-color 0.5s, transform 0.5s;
      background-color: hsla(178, 100%, 50%, 0.541);
      padding: 125px;
      border-radius: 5px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  
  .nft:hover .view{
      opacity: 1;
  }
  

  Marked as helpful

  1

  ---

  

  Ibson Barboza de Oliveira•250

  @IbsonBarbozaPosted about 1 year ago

  @lisztomania23 Thank you so much for the feedback, I was having a lot of trouble getting this little animation right.

  1

  

  lisztomania23•170

  @lisztomania23Posted about 1 year ago

  @IbsonBarboza You're very welcome! I'm glad I could help. I think you forgot to update a few things: cursor: pointer in .view, hover effect is little off by a few pixels set right: 0 and bottom: 0, remove .img:hover.

  Also eth and clock img not seem center-aligned with the text update with this:

  .price {
      display: flex;
      justify-content: space-between;
  }
  
  .eth {
      display: flex;
      align-items: center;font-size: 15px;
      letter-spacing: 1px;
      font-weight: 600;
  }
  
  .clock{
      display: flex;
      align-items: center;
  }
  
  .price img{
      margin-right: 5px;
  }
  

  Few other tweaks put .tilte font-weight:600 and .paragraph font-weight:600. Make sure to update the icon's href attribute to href="./images/favicon-32x32.png" to display the icon correctly. Happy coding! 🚀

  Marked as helpful

  1