Card Overlay Fade

import styles from "./styles.module.css";

export default function CardOverlayFade({ cards = [] }) {
  return (
    <div className={styles.grid}>
      {cards.map((card) => (
        <a key={card.title} href={card.href} className={styles.card}>
          <div
            className={styles.image}
            style={{ backgroundImage: `url(${card.image})` }}
          />
          <div className={styles.overlay} />
          <div className={styles.cardContent}>
            <h3 className={styles.title}>{card.title}</h3>
            <p className={styles.description}>{card.description}</p>
            <span className={styles.cta}>View Project →</span>
          </div>
        </a>
      ))}
    </div>
  );
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  background-color: #1a1a1a;
}

.image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 700ms ease;
}

.card:hover .image {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  z-index: 1;
}

.card:hover .overlay {
  opacity: 1;
}

.cardContent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

.title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.description {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ffffff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.card:hover .cta {
  opacity: 1;
  transform: translateY(0);
}