nft preview card > HTML, CSS(flex)

Community feedback

• 

  Bobby•180

  @BobbypaulPosted over 2 years ago

  Thanks a lot! I really appreciate.

  0
• 

  Bobby•180

  @BobbypaulPosted over 2 years ago

  HI good evening, Nice work, please how did you make the nft pic change to that blue eye when hovered.

  0

  ---

  

  huseyin•90

  @hspolatPosted over 2 years ago

  @Bobbypaul hi, thanks. The overlay class has opacity property. İts value is 0. İf you hover on overlay class, the opacity will change to 1. So the overlay class will be visible. Here is the overlay class:

  .overlay {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 4px;
    right: 0;
    background-image: url('/images/icon-view.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: hsla(178, 100%, 50%, 0.5);
    opacity: 0;
  

  }

  This tutorial is good to understand the overlay topic.

  You can find more details about code in dev tools. For this, you must use right click > inspect combination on the web page.

  1