All comments

• 

  Majito• 30

  @Majito1507

  Submitted almost 2 years ago

  ¿Alguna sugerencia que deseen dejarme?

  En la parte del hover referente a la imagen no pude, opte por ver las soluciones, así que doy crédito a Arturo López Rosa.

  Talvez si saben otra manera sería de mucha ayuda. Gracias.

  

  NFT CARD | HTML & CSS

  1

  7

  0

  

  Pankaj Thapa• 150

  @thapa14

  Posted almost 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

  This comment has received 1 replyShow