Pseudo class example

The image takes on color when you hover over it.

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Change Cards</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="card-container">
      <div class="card">
        <div class="card-image plan"></div>
        <div class="card-content">
          <h2>Plan</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
            exercitationem.
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-image play"></div>
        <div class="card-content">
          <h2>Play</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
            exercitationem.
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-image connect"></div>
        <div class="card-content">
          <h2>Connect</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
            exercitationem.
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-image support"></div>
        <div class="card-content">
          <h2>Support</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
            exercitationem.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  background-color: #fff;
}

.card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.card-content {
  padding: 15px;
}

.card-content h2 {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.card-content p {
  color: #666;
}

.card:hover .card-image {
  filter: grayscale(0%);
}

.plan {
  background-image: url("https://picsum.photos/seed/1234/1600/900");
}

.play {
  background-image: url("https://picsum.photos/seed/5678/1600/900");
}

.connect {
  background-image: url("https://picsum.photos/seed/9101/1600/900");
}

.support {
  background-image: url("https://picsum.photos/seed/1121/1600/900");
}