NFT Card challenge by Frontend Mentor

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Tales 👋,

  Actually to make the animation run smoother, you only need to change a little bit of code in style.css. Change this style below:

  .cardImage:hover::before {
      content: url('../img/icon-view.svg');
      background-color: rgba(0, 255, 255, 0.397);
      border-radius: 10px;
      width: 100%;
      height: 275px;
      position: absolute;
      text-align: center;
      line-height: 300px;
  }
  

  to this code below:

  .cardImage::before {
      content: url('../img/icon-view.svg');
      background-color: rgba(0, 255, 255, 0.397);
      border-radius: 10px;
      width: 100%;
      height: 275px;
      position: absolute;
      text-align: center;
      line-height: 300px;
      opacity: 0;
      transition: opacity 0.3s;
  }
  .cardImage:hover::before {
      opacity: 1;
  }
  

  Also, some little tips:

  • Avoid giving body the style height: 100vh; as that would make some content hidden when the browser height is less than content height. Remove it, or change it to min-height: 100vh; if you want.
  • Remove position: absolute; from .attribution as it is not needed there. It could potentially create problems instead. position: relative; would be enough.

  Hope this helps. Happy coding!

  Marked as helpful

  2

  ---

  

  Tales•60

  @sselatPosted about 2 years ago

  @amalkarim Thank you so much for the tips and the solution to my question :)

  0
• 

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  What animation ? do you mean transition of the overlay?

  0

  ---

  

  Tales•60

  @sselatPosted about 2 years ago

  @yishak621 that's it! But @amalkarim already gave the answer

  0

  

  Tales•60

  @sselatPosted about 2 years ago

  @yishak621 that's it! But @amalkarim already gave the answer

  0