Creating an Interactive NFT Preview Card Component

In this blog post, I will walk you through the process of creating an NFT Preview Card component using HTML, CSS, and JavaScript. This project was inspired by the Frontend Mentor challenge, where I aimed to build a visually appealing and interactive card that displays details of an NFT, including the image, price, time left, and the creator's information.

The Concept

The goal was to create a card that can be used to showcase NFTs. The component needed to include:

1. An image of the NFT.
2. A hover effect where a color overlay appears on the image.
3. Dynamic changes in text and colors when the user hovers over specific areas (like the NFT name and the creator's name).
4. A responsive layout that looks good across devices.

Step 1: Structuring the HTML

The HTML structure is simple yet effective for displaying the necessary NFT information. Here's the key part of the HTML:

<div class="nft-card-container">
  <div id="nft-image" class="nft-image-container">
    <img src="./images/image-equilibrium.jpg" alt="equilibrium-nft-image" class="bft-image" />
    <div class="overlay">
      <img src="./images/icon-view.svg" alt="icon-view">
    </div>
  </div>

  <div class="nft-details-container">
    <h1 id="nft-name" class="heading outfit-bold">Equilibrium #3429</h1>
    <p class="descripiton outfit-light">
      Our Equilibrium collection promotes balance and calm.
    </p>
    <div class="specs outfit-regular">
      <p class="value">
        <img src="./images/icon-ethereum.svg" alt="icon-ethereum" /> 0.041 ETH
      </p>
      <p class="time">
        <img src="./images/icon-clock.svg" alt="icon-clock" /> 3 days left
      </p>
    </div>
  </div>

  <div class="nft-owner-container">
    <div class="owner-image-container">
      <img src="./images/image-avatar.png" alt="jules-wyvren-image" />
    </div>
    <p class="credits outfit-light">
      Creation of <span class="author" id="author-name">Jules Wyvern</span>
    </p>
  </div>
</div>

This structure is straightforward, with sections for the NFT image, details, and creator. The id attributes are particularly important as they allow us to target specific elements in the JavaScript for interactive behavior.

Step 2: Adding Styles with CSS

I used a minimal and clean design with a focus on the hover effects and layout. Here are the key styles that make the card interactive and visually appealing:

.nft-image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 270px;
  height: 100%;
  background-color: var(--active-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nft-image-container.active .overlay {
  opacity: 0.5;
}

The .overlay div, which covers the image, starts with opacity: 0 and becomes visible when the active class is added. The transition property ensures that the change in opacity is smooth.

Additionally, the NFT name and creator's name change color when hovered:

.heading {
  font-size: 21px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-active {
  color: var(--active-color);
}

.author-active {
  color: var(--active-color);
}

When the user hovers over the name or the author, the text color changes to indicate an active state. This is achieved with JavaScript.

Step 3: Making the Card Interactive with JavaScript

The core functionality of the interactive hover effects comes from JavaScript. Here's how the hover behavior is implemented:

1. Hover effect on the image:

let imageCard = document.querySelector("#nft-image");

imageCard.addEventListener("mouseenter", () => {
  imageCard.classList.add('active');
});

imageCard.addEventListener("mouseleave", () => {
  imageCard.classList.remove('active');
});

This code listens for mouse enter and leave events on the image container. When the user hovers over the image, the active class is added, which makes the overlay visible. When the hover ends, the class is removed, and the overlay disappears.

1. Hover effect on NFT name:

let nftName = document.querySelector("#nft-name");

nftName.addEventListener("mouseenter", () => {
  nftName.classList.add('name-active');
});

nftName.addEventListener("mouseleave", () => {
  nftName.classList.remove('name-active');
});

This ensures that the author's name reacts to hover as well, enhancing the interactive experience.

Step 4: Customizing the Look and Feel

The design uses a color scheme defined in the :root selector, which makes it easy to change the colors for the entire component:

:root {
  --main-bg: hsl(217, 54%, 11%);
  --card-bg: hsl(216, 50%, 16%);
  --dark-blue: hsl(215, 32%, 27%);
  --soft-blue: hsl(215, 51%, 70%);
  --active-color: hsl(178, 100%, 50%);
  --text-color: hsl(0, 0%, 100%);
}

This setup allows easy customization of the color scheme by modifying the variables in one place.

Conclusion

This NFT Preview Card component is a simple but effective way to showcase an NFT collection. It combines clean design with smooth interactivity, making it a great starting point for any NFT-related projects. The use of CSS for styling, JavaScript for interactions, and HTML for structure creates a cohesive and responsive experience for the user.

You can view the whole project on https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/nft-preview-card-component-main

Thanks for reading! Let me know if you have any questions or feedback.