Creating an Interactive NFT Preview Card Component

This tutorial guides you through building an interactive NFT preview card using HTML, CSS, and JavaScript. Inspired by a Frontend Mentor challenge, this project creates an attractive and engaging card displaying NFT details: image, price, remaining time, and creator information.

Design Goals:

The card showcases NFTs with:

1. NFT image display.
2. Hover effect revealing a color overlay on the image.
3. Dynamic text and color changes on hover (NFT and creator names).
4. Responsive design across various devices.

Step 1: HTML Structure

The HTML is straightforward, organizing NFT image, details, and creator information. id attributes are crucial for JavaScript interaction. A simplified example:

<code class="language-html"><div id="nft-card">
  <div id="nft-image">...</div>
  <div id="nft-details">...</div>
  <div id="nft-creator">...</div>
</div></code>

This structure efficiently presents the necessary NFT data.

Step 2: CSS Styling

The design prioritizes hover effects and layout. Key CSS for interactivity:

<code class="language-css">.nft-image-container .overlay {
  position: absolute;
  /* ... other styles ... */
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.heading {
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-active, .author-active {
  color: var(--active-color);
}</code>

The .overlay initially has opacity: 0, becoming visible (opacity 0.5) when the active class is added. Smooth transitions are ensured using the transition property. Hovering over the NFT name or creator's name changes the text color via the name-active and author-active classes, handled by JavaScript.

Step 3: JavaScript Interactivity

JavaScript handles the hover effects:

<code class="language-javascript">let imageCard = document.querySelector("#nft-image");

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

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

// Similar event listeners for #nft-name and #nft-creator</code>

This adds/removes the active class on mouseenter/mouseleave, controlling the overlay's visibility. Similar event listeners manage the color changes for the NFT and creator names.

Step 4: Customization

A :root selector defines the color scheme, simplifying customization:

<code class="language-css">:root {
  --main-bg: hsl(217, 54%, 11%);
  /* ... other color variables ... */
}</code>

Changing these variables updates the entire component's colors.

Conclusion:

This NFT preview card offers a clean, interactive way to showcase NFTs. The combination of HTML structure, CSS styling, and JavaScript interactivity creates a responsive and engaging user experience.

The complete project is available at: https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

The above is the detailed content of Creating an Interactive NFT Preview Card Component. For more information, please follow other related articles on the PHP Chinese website!