nft-preview-card-component

I'm most proud of implementing a hover effect using the ::after pseudo-element without affecting the entire element. Instead of applying the hover effect to the .nft-image directly, I used ::after to create an overlay that appears only on hover. This keeps the image intact while adding a smooth transition effect

  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.nft-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(178, 100%, 50%, 0.4); 
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.nft-image-container:hover::after {
  opacity: 1; 
}```

### What challenges did you encounter, and how did you overcome them?
One of the main challenges was managing hover effects and opacity layers while keeping the design clean. 
Initially, the background color opacity was affecting the entire image rather than just the overlay. 
I resolved this by using ::after pseudo-elements and adjusting the hsla() values for transparency.

### What specific areas of your project would you like help with?
I’d like feedback on:
1. Optimizing pseudo-elements: Are there better ways to handle ::after effects without affecting layout?
2. Performance: Does this approach impact rendering performance in larger projects?
3. Scalability: How can I make this reusable for multiple images with minimal CSS?