Convert an Image into Grayscale Image using HTML/CSS

In HTML and CSS, you cannot directly convert an image into grayscale. However, you can achieve a grayscale effect by overlaying a grayscale version of the image on top of the original image using CSS. Here’s an example:

HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
  <div class="grayscale-overlay"></div>
</div>

CSS:

.image-container {
  position: relative;
}

.grayscale-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5; /* Adjust the opacity to control the intensity of the grayscale effect */
  mix-blend-mode: luminosity; /* Use 'luminosity' blending mode for the grayscale effect */
}

In the example above, we have an image-container div that holds the original image and the grayscale overlay. The overlay is represented by the grayscale-overlay div. The overlay div covers the entire area of the image using absolute positioning and has a black background color. The opacity property controls the intensity of the grayscale effect, where 1 is fully opaque and 0 is fully transparent. The mix-blend-mode property set to ‘luminosity’ specifies the blending mode that creates the grayscale effect.

Note that this approach only creates a visual effect of a grayscale image. The actual image remains in its original colors. If you want to generate a grayscale version of the image server-side or using JavaScript, you would need to use appropriate image manipulation techniques.