All comments

• 

  Majito•30

  @Majito1507

  Submitted about 3 years ago

  

  NFT CARD | HTML & CSS

  1

  70
  

  Pankaj Thapa•240

  @thapa14

  Posted about 3 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...!

  1

  Marked as helpful