NFT CARD | HTML & CSS

Community feedback

• 

  Pankaj Thapa•150

  @thapa14Posted over 2 years ago

  Hello, Your solution is very nice. and your design is also pretty good. I have a different approach to achieve the hover effect on image. You can watch it in my profile for more details..

  **this is html **

  <div class="card__image">
          <div class="originalImage">
            <img src="./images/image-equilibrium.jpg" alt="img">
          </div>
        </div>
  

  and this is its CSS

   .card__image{
      width: 100%;
      border-radius: 1rem;
      cursor: pointer;
      position: relative;
  }
  
  .originalImage{
      width: 100%;
  }
  .originalImage img{
      width: 100%;
      border-radius: 1rem;
  }
  
  .originalImage::before{
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: var(--cyan) url(./images/icon-view.svg)no-repeat center center;
      opacity: 0.6;
      visibility: hidden;
  }
  

  hope you like it.. Happy coding...!

  Marked as helpful

  1

  ---

  

  Majito•30

  @Majito1507Posted over 2 years ago

  @thapa14 Muchas gracias por compartir tus conocimientos lo pondré en práctica.

  0