Make Grey elements pop over-top of greyscale photo

Instead of creating a contrast by playing with the dark tones of your pictures, you could do the opposite and “illuminate” some parts.

1) You could use 2 different gray; one made of black for what’s on top of your UI and the background could be a monotone of a different gray. This way, the “gray” on top of your design will loo like a darker gray, and the images below will still be gray but their density at 100% will be like a “rich gray.” You can do this by using the “duotone” mode in Photoshop and using a gray color instead of black.

Why it’s better than using grayscale is because with grayscale, there’s a limit to the shade you can add on your picture background; if you go too low, you will lose a lot of details to get to a gray. With a monotone, you can still keep all the details that you would normally see in black, but they’ll be gray!

2) Combined with the method above, you can add a transparent white box below your graphics. I see you mentioned you don’t want to use a white box but if you add transparency to it, it might look very soft as effect and can integrate the foreground graphics smoothly with the background images.

3) Again combined with #1, you can also use the drop shadow with a white color instead of using black to illuminate the borders. You could also use the outer glow effect.

PS: These are solutions that can be used easily in software like Photoshop but you can still use some of them with CSS or publishing software. The principle remains the same and you might need to re-adjust the background pictures, if that’s an option for you.