How to mask sibling divs
I am currently designing my portfolio and I've been wondering how do I achieve this design in css?
I tried making it but I don't know how to hide the overflowing of the shape.
this is my sass
html,
body {
background: #121212;
}
.parent-div {
position: relative;
display: flex;
gap: 1rem;
overflow: hidden;
div {
background: rgba($color: #000000, $alpha: 0.8);
display: flex;
justify-content: center;
align-items: center;
width: 300px;
aspect-ratio: 1/1;
border-radius: 15px;
border: solid 1.5px #303030;
}
.shape {
background: #ea0599;
position: absolute;
margin: auto;
left: 0;
right: 0;
border-radius: 50%;
width: 900px;
top: 250px;
filter: blur(100px);
opacity: 0.5;
mix-blend-mode: plus-lighter;
}
}
this is my html
<div className='parent-div'>
<div className=''>div1</div>
<div className=''>div2</div>
<div className=''>div3</div>
<div className='shape'></div>
</div>
or is there another way of doing this effect?7 Replies
I'd make three backgrounds inside the divs, and offset them appropriately. I don't think you can achieve what you want otherwise
yah that is the resort i could think of. But I thought maybe there are better ways of doing that like this post. I hope someone could find a better solution
If I understand what you want correctly I think that you could set the boxes as clip-path masks and place the background as a pseudo element.
https://codepen.io/cbolson/pen/MWzpoRL
Is this something like what you are after?
OMG Thank you! I knew anything is possible in css I just couldn't figure this out. Thank you man!
EDIT: There is some overlapping of the shape in between the cards. But it'll work.
Sorry, missed that.
Try adding
round 15px
to the clip path.
inset(0 round 15px)
Worked! Thanks again🙏