Masking layers in CSS
I am trying to achieve a similar effect for this
I know how to do a background image and all. But the blue circle is supposed to be an image with a layer mask around it so you can see the background image. The gray div on the left will just overlap behind it. I'm not sure how to achieve the masking effect, although I've done some research in it here , but I'm having a hard time communicating that it would be helpful to achieve the effect I'm trying to achieve. Anyone have any ideas as to how I might describe this?
+3
source to share
2 answers
Something like this I guess.
* { margin:0; padding: 0; }
body {
background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
}
p { padding: 0 10px; font-size: 12px; color:#fff; line-height: 1.3; overflow: hidden; }
.outer {
margin: 50px auto;
width: 300px;
position: relative;
}
.box {
position: relative;
padding: 20px 0;
overflow: hidden;
border-radius: 10px;
}
.box:before {
content: '';
display: block;
width: 50px;
height: 50px;
margin-left: -25px;
float: left;
border-radius: 50px;
box-shadow: 0 0 0 350px rgba(0, 0, 0, 1);
}
.outer:before {
content: '';
position: absolute;
width: 40px;
height: 40px;
background-color: blue;
border-radius: 20px;
position: absolute;
top: 25px;
left: -20px;
}
<div class="outer">
<div class="box"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s</p></div>
</div>
+3
source to share
Something like this might get you started:
Html
<div id="container">
<div id="gray-box" class="clip-circle"></div>
<div id="blue-circle"> </div>
</div>
CSS
.clip-circle {
clip-path: circle(5px at 0px 15px);
}
#gray-box {
border-radius: 15px;
background-color: #AAA;
width: 300px;
height: 60px;
}
#blue-circle {
position: absolute;
left: 5px;
top: 13px;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: blue;
}
0
source to share