NFT card component preview

Community feedback

• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  You're so close to getting the hover!

  • You probably want position: relative; instead of display: relative;
  • The CSS selector to make the icon appear on hover would be something like .imghover:hover .middle {
  • The background on .middle would be something like this, too: background: hsla(178, 100%, 50%, 0.8);

  .imghover {
       position: relative;
       width: 300px;
   }
  
   /* made changes here */
  .image {
      display: block;
      width: 100%;
      border-radius: 5%;
  
  }
  .middle {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: hsla(178, 100%, 50%, 0.8);
      border-radius: 10px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.60s;
  }
  .imghover:hover .middle {
      opacity: 1;
  }
  

  Marked as helpful

  1