0

I was playing around with javascript, css, + html and I want to make a div that shows only a section of a separate full image (Similar to how a "layer mask" would in digital art). Is there any way that I could do this?

My code looks like this:

css:

#fulldiv {
  position: absolute;
  z-index: 9;
  border: 2px solid #302058;
  text-align: center;
  height: 150px;
}

#browserhead {
  width: 100px;
  padding: 5px;
  z-index: 10;
  background-color: #302058;
  color: #ffffff;
}

html:

<div id="fulldiv">
  <div id="browserhead">Title</div>

</div>

I'm very new to much of coding, and I'm not the best at explaining what I mean, so my apologies if this doesn't make sense to anybody.

SucculentPott
  • 1
  • 1
  • also: [Use a dynamically expanding div as clipping mask for background image in parent](https://stackoverflow.com/questions/73175540/use-a-dynamically-expanding-div-as-clipping-mask-for-background-image-in-parent) – pilchard Dec 26 '22 at 00:37
  • With parent `position: relative` and child(ren) `position: absolute; inset: 0` you can stack as much elements on top of each other as you like. Using `filter: ...` and/or `opacity: ...` per child (layer) you can easily mimick 'layer mask's. Color manipulation, dodge&burn, masking, the works. Also, investigate `background-image`/`mask-image` in combination with `background-blend-mode`/`mix-blend-mode`. `clip-path` has already been mentioned. The only limiting factor is your imagination... – Rene van der Lende Dec 26 '22 at 00:45

0 Answers0