Trying to get the black to be able to see through to the image

I want the black to be set as transparent while also being able to see through the red to the image.

When the black is set to transparent, the picture should become visible.

How would I accomplish that?

code: https://jsfiddle.net/t12upjz8/

.image {
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background-image: url("https://via.placeholder.com/300");
  background-repeat: no-repeat;
  background-size: cover;

}

.layer {
  width: 300px;
  height: 300px;
  background: red;
}

.layer2 {
  width: 150px;
  height: 150px;
  background: black;
  position: absolute;
  top: 30px;
  left: 15px;
  bottom: 0;
  right: 0;
}
<div class="image">
  <div class="layer"></div>
  <div class="layer2"></div>
</div>

Mate, I am not able to understand your question. Would you mind repeating in a simpler way?

javascriptcoding5678: When the black is set to transparent, the picture should become visible.
Where is the picture?

This: https://via.placeholder.com/300


.image {
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background-image: url("https://via.placeholder.com/300");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: red;

}

Okay, let me understand your problem first. You have a background image and on the top of that, you have a div with background: red and again on the top of that you have another div with background: black.
Now you have to see the background image thought black , to red and finally image.
Have you tried opacity for that. You can set like opacity: 0.3 in outer two div’s. If this is not the case, please feel free to response.

I only want to see the picture, image come through the black portion only.

I want to be able to set the black to transparent and have the picture, image be visible through only the transparent space.

Sorry Mate, I have no idea how to do that. May be stackoverflow is way to go. If you made it, share the link here so I can learn as well.

Instead of setting the black one to transparent, you could give it the background image. That would look like this:

fcc

But that would shrink the image, that’s not what I want.

Something like this discussion ?

and for your layout

<div class="image">
  <div class="layer"></div>
  <div class="layer2"></div>
</div>
.image {
  position: relative;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background-image: url("https://via.placeholder.com/300");
  background-repeat: no-repeat;
  background-size: cover;
}

.layer {
  width: 300px;
  height: 300px;
  background: transparent;
} 

.layer2 {
  width: 150px;
  height: 150px;
  background: transparent;
   width: 200px;
  height: 250px;
  position: absolute;
  top: 30px;
  left: 15px;
  bottom: 0;
  right: 0;
  box-shadow:0 0 0 160px  red;
}

I didn’t try to make it fit, you can adjust it in dev tools, .layer is your black/transparent box

Ok I think I finally understand what you’re trying to do. You don’t need those layers at all, you can add this to your image, it’ll create a rectangle (those px values define the corners from top/left, top/right, bottom/right to bottom/left) and only make that part of the image visible.

.image {
  clip-path: polygon(20px 10px, 150px 10px, 150px 160px, 20px 160px); 
}

This worked.

code: https://jsfiddle.net/j3dwaebh/

.image {
  position: relative;
  display: inline-table;
  overflow: hidden;
}

.layer {
  display: flex;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 5px;
  box-shadow: 0 0 0 50px blue;
}

.layer2 {
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
}
<div class="image">
  <img src="https://picsum.photos/200" height="200" alt="Sea View">
  <div class="layer">
    <div class="layer2"></div>
  </div>
</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.