0

I'm trying to add a vignette effect to an <img>.

I know there are solutions where it can be solved adding a <div> parent and a CSS, but it's not what I'm looking for.

HTML

So this is what I have...

<img src="https://example.com/image.jpg" class="vignette">

CSS

And I need help with this...

.vignette {
}

To reach this...

enter image description here

Any ideas?

Marcel
  • 2,810
  • 2
  • 26
  • 46

1 Answers1

2

The first obvious thought was an inset box-shadow. However that does not go over the actual image.

It will go over a background-image.

So this snippet keeps the given HTML img element as is but actually renders the image as zero width by making the element have padding which completely fills it.

The original image is put in as a background-image and a box-shadow inset overlays it.

Obviously you'll want to play with the shadow's parameters to get the sort of effect you want. This is what this snippet produces:

enter image description here

.vignette {
  width: 400px;
  height: 300px;
  background-image: url(https://picsum.photos/id/129/400/300);
  background-size: cover;
  background-position: center center;
  padding: 150px 200px;
  box-sizing: border-box;
  box-shadow: inset 0 0 70px 50px black;
}
<img src="https://picsum.photos/id/129/400/300" class="vignette">
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thanks, it works. But is there a way to make that more dynamic? Let's say I want to apply `vignette` to multiple images of different dimensions, not only `400px` x `300px`. – Marcel Jun 10 '22 at 01:37
  • Are you saying that the only factor that decides the space taken up by the img element is its natural dimensions or is there some other context like a container which decides the dimensions? At the moment I can only think of building the dimensions into each image element, in a style attribute (or adding those at load time through JavaScript). – A Haworth Jun 10 '22 at 05:53