Submitted almost 3 years ago

NFT CARD | HTML & CSS

Majito•30

@Majito1507

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

¿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.

Code

Please log in to post a comment

Community feedback

Pankaj Thapa•190

@thapa14

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

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord