1

I have a page with a transparent overlay that covers the entire page. A small part of that page I want to show without the overlay to point the focus to that part. Can this be done with CSS, maybe clip? I've tried multiple codes but nothing gives what I need.

Codepen link: https://codepen.io/twan2020/pen/abmLVwv

Above link shows the exact oppposite of what I want. Now the entire screen is visible and only a small part of the overlay shows. I've tried moving the clipping code to .clipmask and giving it a transparent background but this only shows the overlay covering the entire page.

.clipmask{
  position: absolute;
  clip: rect(10px, 190px, 190px, 10px);
  background-color: transparent;
}

I also found answers on SO using a huge box shadow to get this effect but this seems more like a dirty fix to me. I hope I can achieve this with cleaner code. Is there a way how?

twan
  • 2,450
  • 10
  • 32
  • 92

0 Answers0