How can recreate this overlay gradient

Question

Looking to make a banner image for a website and I've tried to recreate these two images using a few different gradient patterns but I can't seem to get close enough to the referenced images. Both are using the same background image but with slightly different overlay and gradient styles. Not concerned about the line work in the images just the overlays and how to achieve this, almost identically if possible.

One of the colors in use as far as I can tell is #0f6f7b

Any help on this would be appreciated. TIA

Answer 1

A three layer work.

It seems to have a copied layer of the underlying image, but blurred. It has layer mask that hides partially the blurred version. You can have a simple white to black gradient in the transition zone in the mask. It can well be also manually painted there. Black means full transparency, white means fully opaque.

The other version with darker left end probably has something added to the blurred version before blurring. It can simply be shifted and show something dark from the left, a scene which is cropped out of the non-blurred version.

On top there's the electric circuit like drawing layer. It can be a normal layer where the background is erased. But the drawing can also be in an adjustment layer which makes the blurred layer darker or colorizes it. In that case the drawing is as white on black in the layer mask of the adjustment layer.

An example: