Frontend Mentor - NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• The challenge
• Screenshot
• Links
• Built with
• What I learned
• Useful resources
• Author

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Live Site URL: @GitHub

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

The main challenge was to overlay the eye icon with a matt cyan background on the main image of the card. This is my way to solved the problem:

/* hover img classes */

.card__img {
  position: relative;
  transition: 0.5s ease-in-out;
}

.card__img__hover {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 0.5em;

  /* to  fill the whole img div */
  width: 100%;

  background-color: hsla(178, 100%, 50%, 0.5);
  transition: 0.5s ease-in-out;
  opacity: 0;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.card__img:hover .card__img__hover {
  opacity: 1;
}

/* downscale viewicon keeping 100% width on the main img div */
.card__img__hover__icon {
  transform: scale(0.2);
}

Useful resources

• W3Schools Image Overlay Tutorial - This tutorial helped me to overlay the eye icon on the main image

Author

• Website - Emanuele Del Monte
• Frontend Mentor - @xdelmo