Kevin Powell - Community•5mo ago

Overlay on a div with a certain cutout in the middle.

Actually this is on top of a video stream but for simplicity sake lets just say its over a div. I am trying to create a verification system where the user can verify themselves using facial verification. For the design part I need to display a face cutout overlay on my video stream essentially telling the user to place their face in the cutout to verify themselves. What is the best possible approach to this? I have provided an image of what I am trying to achieve but for web. Any help will be greatly appreciated.

6 Replies

Kevin Powell•5mo ago

Mask is the first thing that comes to mind: https://codepen.io/kevinpowell/pen/BagLWrp/d703a55e92c690d4f9875d88b5b25e22

MarkBoots•5mo ago

or instead of the mask just a bg-gradient for the overlay

background-image: radial-gradient(transparent 50%, rgb(0 0 0 /.5) 50%)

background-image: radial-gradient(transparent 50%, rgb(0 0 0 /.5) 50%)

Kevin Powell•5mo ago

no idea why I did a mask using the same gradient I could have just used a gradient for, lol.

MarkBoots•5mo ago

i was thinking of it too, until i saw your pen and thought, wait a minute

clevermissfox•5mo ago

As Mark has taught me, with both the mask of the bg-img you may want to use a calc to account for the fuzzy edges

  background: radial-gradient(transparent 50%,  hsl(0 0% 0% / 0.5) calc(1px + 50%));

  background: radial-gradient(transparent 50%,  hsl(0 0% 0% / 0.5) calc(1px + 50%));

capt_uhu•5mo ago

it's a bit fiddly but you should also be able to do the thin white oval line as part of the gradient:

background-image: 
    radial-gradient(
      #0000 calc(50% - 1px),
      #fff calc(50% + 1px),
      rgb(0 0 0 / .5) calc(50% + 2px));

background-image: 
    radial-gradient(
      #0000 calc(50% - 1px),
      #fff calc(50% + 1px),
      rgb(0 0 0 / .5) calc(50% + 2px));

Gaming

Programming

Overlay on a div with a certain cutout in the middle.