Is there a way to position background images relative to each other in CSS?

I'm trying to create a kind of dreamy effect where hovering over a child element changes the parent's parent's background image and there's a long transition on the background color of the direct parent from `rgba(255, 255, 255, 1)` to `rgba(255, 255, 255, 0.5)` (solid white to semi-transparent white) to fade it in. Then there's an white, inset box-shadow on the direct parent to create a kind of vignette effect/feather the edges of the background image. If that didn't make much sense it's roughly like this:

HTML:

<div id="parents-parent"> <div id="parent"> <div id="child-0"> </div> <div id="child-1"> </div> <!-- etc --> </div> </div>

CSS:

#parents-parent { background-size: contain; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }

#parent { background-color: rgba(255, 255, 255, 1); transition: background-color 10s; box-shadow: 0 0 10vw 10vw white inset; }

And then in JS just a `'mouseover'` event listener on each child element that adds the corresponding background image to `#parents-parent` and changes `#parent`'s background color to `rgba(255, 255, 255, 0.5)` and the reverse for `'mouseout'`.

I'm 90% of the way there but the problem I have is that the images are all different dimensions so some of them don't use all the vertical space and the vignette/feathered edges effect is only on the left and right edges whereas the top and bottom are letterboxed. I want to be able to see the whole image so changing the `background-size` to `cover` won't work. I tried layering the background image with a `radial-gradient` from transparent to white but I'd need to hardcode different settings for each image and I'd like it to be more flexible than that.

The only other possibility I can think of is to somehow add two `linear-gradient`s from white to transparent/transparent to white and position them at the top and bottom edges of the background image and overlapping. Is that possible?

I can always edit the photos but this is a CSS exercise so that's a last resort.

Thanks for any input!