I want the black to be set as transparent while also being able to see through the red to the image.
I only want to see the picture, image come through the black portion only.
When the black is set to transparent, the picture should become visible.
I want to be able to set the black to transparent and have the picture, image be visible through only the transparent space.
How would I accomplish that?
code: https://jsfiddle.net/gfc3jrbL/
.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>
TechnoBear
July 4, 2021, 7:28am
2
23 posts were merged into an existing topic: Trying to get the svg’s on top of the circle
I want the black to be set as transparent while also being able to see through the red to the image.
I only want to see the picture, image come through the black portion only.
When the black is set to transparent, the picture should become visible.
I want to be able to set the black to transparent and have the picture, image be visible through only the transparent space.
How would I accomplish that?
code: https://jsfiddle.net/gfc3jrbL/
.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>
If you make the image transparent, it cannot also be black.
Do you mean you want to adjust the opacity?
2 Likes
PaulOB
July 2, 2021, 7:48am
27
You can use rgba for the black and the last values is the opacity. This would make the black 50% opaque.
background: rgba(0,0,0,0.5);
e.g.
.layer2 {
width: 150px;
height: 150px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 30px;
left: 15px;
bottom: 0;
right: 0;
}
If that’s what you were trying to do?
1 Like
How does doing that help me to be able to see the picture?
This Picture:
background-image: url("https://via.placeholder.com/300");
When the black is set to transparent, the picture should become visible.
I want to be able to set the black to transparent and have the picture, image be visible through only the transparent space.
When the black area is set to transparent, I want to be able to view the picture through the red color that is on top of it.
I want to be able to view what is behind the red layer.
Example:
That image is behind the red layer, so no, changing the opacity of the black layer won’t allow it to show through.
Do you mean that you want to create a window in the red layer to display the image, and you don’t actually want a second layer at all?
ronpat
July 2, 2021, 8:18am
30
simplistic?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
Trying to get the black to be able to see through to the image
https://www.sitepoint.com/community/t/trying-to-get-the-black-to-be-able-to-see-through-to-the-image/369915
asasass
-->
<style>
html {
box-sizing:border-box;
}
*,*::before,*::after {
box-sizing:inherit;
}
.imagebox {
width:300px;
height:300px;
background-image:url("https://via.placeholder.com/300");
background-repeat:no-repeat;
background-size:cover;
}
.layer1 {
height:300px;
background:rgba(0,0,0,1); /* change to transparent */
}
.layer2 {
height:300px;
background-image:linear-gradient(to right, red 0, red 15px, transparent 15px, transparent 165px, red 165px, red 300px),
linear-gradient(to bottom, red 0, red 30px, transparent 30px, transparent 180px, red 180px, red 300px);
}
</style>
</head>
<body>
<div class="imagebox">
<div class="layer1">
<div class="layer2"></div>
</div>
</div>
</body>
</html>
px dimensions, really?
1 Like
I want to be able to view the picture:background-image: url("https://via.placeholder.com/300");
It’s still black.
code https://jsfiddle.net/84h0d3qb/1/
ronpat
July 2, 2021, 8:24am
32
Did you try changing layer 1 CSS to transparent?
How would I be able to use absolute positioning to move the square around anywhere I want?
position: absolute;
top: 30px;
left: 15px;
bottom: 0;
right: 0;
ronpat
July 2, 2021, 8:40am
34
Sounds like absolute positioning is now a requirement.
1 Like
Something other than gradient would need to be used here.
ronpat
July 2, 2021, 9:20am
36
The gradient may not be the most sophisticated method of creating the opening in the red layer through which the image is viewed, but it is dirt easy. And as you can tell, the black box is actually a full sized layer. The gradient can be simplified somewhat by using calc but it will not be mindless to move the box around over the image. That will require JS and possibly a better technique than the gradient although we’re only talking about calculating two (OK 4) values as the cursor moves… assuming that the box follows the cursor. You haven’t mentioned how or why the box needs to move. It seems like a tiresome frustration to me as a potential user unless there is a really good reason for it.
2 Likes
PaulOB
July 2, 2021, 9:39am
37
In that demo you set the last value to 1 which means no opacity unlike the code I gave you where it was half opacity (0.5). If it is one then it is not transparent at all. The value goes from zero to 1 (full transparency (0) to none (1))
.layer1 {
height: 300px;
background: rgba(0, 0, 0, 0.5);
}
1 Like
PaulOB
July 2, 2021, 10:02am
38
Are you trying for this type of effect?
Or a dynamic effect with JS.
Or using box-shadow.
https://codepen.io/paulobrien/pen/gOWpQpr
3 Likes
How would I connect the square to the circle so that only one absolute positioning is being used?
Next, how would I color in only the top and bottom left and right triangles of the square?
Leaving only the circle portion see-through.
code: https://jsfiddle.net/0cynv2aj/
.image {
position: relative;
display: inline-table;
overflow: hidden;
}
.layer {
width: 150px;
height: 150px;
box-shadow: 0 0 0 1px red;
position: absolute;
top: 10px;
right: 0;
bottom: 0;
left: 10px;
}
.layer2 {
width: 150px;
height: 150px;
box-shadow: 0 0 0 1px red;
border-radius: 50%;
position: absolute;
top: 10px;
right: 0;
bottom: 0;
left: 10px;
}
<div class="image">
<img src="https://picsum.photos/500" width="200" alt="Sea View">
<div class="layer"></div>
<div class="layer2"></div>
</div>
Try this.
.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;
opacity: 0.5;
}
.layer2 {
width: 150px;
height: 150px;
background: black;
position: absolute;
top: 30px;
left: 15px;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.5);
}
<div class="image">
<div class="layer"></div>
<div class="layer2"></div>
</div>
PaulOB
July 2, 2021, 6:28pm
41
I already showed you how to do that with the box-shadow trick.
How would I center the circle vertically/horizontally inside the white square?
code: https://jsfiddle.net/vd70zcok/
.image {
position: relative;
display: inline-table;
overflow: hidden;
}
.layer {
width: 154px;
height: 154px;
overflow: hidden;
position: absolute;
top: 10px;
left: 50px;
box-shadow: 0 0 0 500px blue;
}
.layer2 {
width: 150px;
height: 150px;
box-shadow: 0 0 0 150px white;
border-radius: 50%;
}
<div class="image">
<img src="https://picsum.photos/500" width="500" alt="Sea View">
<div class="layer">
<div class="layer2"></div>
</div>
</div>
