NFT preview card component. CSS, Flex and Grind

Community feedback

• 

  Paweł Chudecki•860

  @SoulRvr29

  Posted almost 2 years ago

  To make the hover effect, first add the icon icon-view.svg to the HTML in the section with the hero class. Then replace in your CSS

  .hero img {
      border-radius: 10px;
  }
  

  with:

  .hero {
     background-color: var(--cyan);
     border-radius: 10px;
     overflow: hidden;
     position: relative;
  }
  .hero:hover img:first-child {
     opacity: 0.5;
     cursor: pointer;
  }
  .hero:hover img:last-child {
     display: block;
     cursor: pointer;
  }
  
  .hero img:first-child {
     display: block;
     width: 100%;
  }
  .hero img:last-child {
     position: absolute;
     display: none;
     top: calc(50% - 1.5rem);
     left: calc(50% - 1.5rem);
     width: 3rem;
     height: 3rem;
  }
  

  The background behind the image will be cyan and when hover occurs the image will become semi-transparent. You can rename img:first-child and img:last-child to your own class names for better readability.

  01

  Marked as helpful