.image-container {
  position: relative;
  display: inline-block; /* Adjust display property as needed */
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adjust the last value (0.5) for the desired transparency level */
  pointer-events: none; /* Allows clicks to go through the overlay to the image */
}

.image {
  display: block;
  width: 100%; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
}