/nft-preview-card-component-main

An NFT preview card component. Design provided by frontendmentor.io

Primary LanguageCSSMIT LicenseMIT

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

Overview

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

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid

What I learned

While this project was small-scale and simple, I was challenged a bit by trying to display an overlay on hover. When a user hovers their cursor over the image, an overlay should appear with an icon of an eye to suggest the user can view the image.

To accomplish this effect, I created a <div> parent element to contain three other elements. The first element is the image, the second is the overlay, and the third is the eye icon.

<div class="card_image-container">
  <div class="overlay"></div>
  <img src="eye.svg" alt="eye icon">
  <img src="./images/image-equilibriu.jpg" alt="NFT cover image">
</div>

The effect itself is achieved by using the parent div element's :hover pseudo-class to change the opacity of the overlay and eye icon.

.overlay,
.icon-view {
  position: absolute; /* The parent is set to position relative */
  opacity: 0;
}

.overlay {
  width: 302px;
  height: 302px;
  top: 0;
  left: 0;
  background: var(--color-primary);
  border-radius: 8px; 
}

.icon-view {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
}

.image-container:hover .overlay {
  opacity: 0.5;
}

.image-container:hover .icon-view {
  opacity: 0.75;
}

Continued development

I want to continue learning more about writing semantic HTML5 markup, coming up with good CSS class names, and using both Flexbox and CSS Grid for responsive layouts.

Useful resources

  • DevDocs - DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
  • MDN - Resources for developers, by developers.

Author