Creating colored box shadow for grayscale image?

HTML-CSS
1

I’m working on my portfolio page and I have a bunch of images on it: https://codepen.io/Nixerrr/full/wrPPJb/

I would like to keep the images black & white so I added “filter: grayscale(100%);” to the img tag in CSS. image
However, I would like them to have a blue box-shadow. The problem is that now the shadows turn grayscale too. How could I solve this?

2

How about nesting the image in a <div>, then set that <div> to have the box shadow?

<div class="col-sm-4">
  <div class="img-shadow">
    <img src="...">
  </div>
</div>

img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 1;
}

.img-shadow {
  box-shadow: 10px 10px 1px #caebf2;
}

There might be a better way to achieve this effect, but this one seems to work.

You might also want to use smaller images. You’re currently using a whopping 3500x2300 image on one of them for a small image on the page, and it takes some time to load. AFAIK, you can choose different sizes in pexels.

1 Like
3

It worked! Thanks, Kev! And thanks for the tip on the image size.