CSS Black and White Image Color on Hover

This code snippet enables you to create a visually appealing effect where images appear in black and white and transition to their original colors on hover.

The CSS code provides styling for the images, setting their size, aspect ratio, object-fit, and background properties. The background-blend-mode property is used to achieve the black and white effect by combining the luminosity of the image with the hue and saturation of the background color. On hover, the images transition smoothly to their original colors. The code also includes a grid layout to center the images and add a background color.

How to Color Black and White Image on Hover

First of all, create img element and place the image source link inside the src attribute and inside the –i variable in the style attribute. You can add multiple images by following the same structure.

<!-- I have to duplicate the url, that's the only drawback -->
<img src="https://picsum.photos/id/56/250/250" class="left" style="--i:url(https://picsum.photos/id/56/250/250)" alt="a jellyfish">
<img src="https://picsum.photos/id/292/250/250" class="right" style="--i:url(https://picsum.photos/id/292/250/250)" alt="a lioness">
<img src="https://picsum.photos/id/287/250/250" class="top" style="--i:url(https://picsum.photos/id/287/250/250)" alt="a bear">
<img src="https://picsum.photos/id/165/250/250" class="bottom" style="--i:url(https://picsum.photos/id/165/250/250)" alt="a wolf">

Now, style the images using the following CSS styles. The background-blend-mode CSS property blends the luminosity of the image with the hue and saturation of the background color. This creates a black and white effect on the image.

img {
  --s: 200px; /* the image size */
  width: var(--s);
  height: var(--s); /* better than aspect-ratio in case the image has a height attribute */
  box-sizing: border-box;
  object-fit: cover;
  background: var(--i) 50%/cover #000;
  background-blend-mode: luminosity; /* we take the luminosity of the image and we use the hue/staturation of back color so we end having hsl(0 0% L)*/
  transition: .5s;
  cursor: pointer;
}
img.left {
  object-position: right;
  padding-left: var(--s);
}
img.right {
  object-position: left;
  padding-right: var(--s);
}
img.top {
  object-position: bottom;
  padding-top: var(--s);
}
img.bottom {
  object-position: top;
  padding-bottom: var(--s);
}

img:hover {
  padding: 0;
}
.cd__main{
   display: grid !important; 
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 30px;
  background: #C6A49A !important;
}

That’s all! hopefully, you have successfully created black & white image and color on Hover using CSS. If you have any questions or suggestions, feel free to comment below.