How to mask "hr" line with rounded div - html

Question

I need something look like this:
I have used the bootstrap framework. The line "hr" should not visible behind the circle div (as shown in the picture). Is it possible with css masking??
My code is below:
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
.about-info hr {
position:absolute;
width: 100%;
right: 15px;
left: 15px;
top: 40%;
z-index: 1;
}
.about-info .text {
width:100px;
height:100px;
background:rgba(153,153,153,0.5);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto
}
.about-info .text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Here is a solution that uses flex-box
you may want to tweak it some (note: that the flex widths and height may scale on differently on viewports of different sizes
.container.bg{
font-size:5em;
}
.flex-container {
min-height:5em;
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
display: flex;
/*makes the container a flex-box*/
flex-direction: row;
align-items: center;
/* centers the stuff V*/
}
.hr {
flex-grow: 2;
/* make the rules 2x the width as circles*/
height: 2px;
border: 1px solid #ccc;
}
.text {
font-family: impact;
font-size: .3em;
}
.about-info {
padding-top: 70px;
padding-bottom: 90px;
/*position: relative*/
width: 80px;
height: 80px;
background-color: rgba(255, 255, 255, .5);
border-radius: 100%;
text-align: center;
flex-grow: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container bg">
<div class="flex-container">
<div class="about-info">
<div class="text "><span>Honesty</span>
</div>
</div>
<div class="hr"></div>
<div class="about-info">
<div class="text "><span>Transparency</span>
</div>
</div>
<div class="hr"></div>
<div class="about-info">
<div class="text "><span>Integrity</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Have you considered using :after on .text? so something like:
.text:after {
content: '';
position: absolute;
top: 50px;
left: 115px;
display: block;
width: 210px;
border: 1px solid #fff;
}
And from there adjusat the width/height etc to get it looking it proper.
Take a look at the fiddle here: https://jsfiddle.net/mjwtL2ze/3/

Answer 3

(3 edits)
It's the opacity that prevents z-index from "working".
Note: z-index is doing its job, but if the top layer is transparent, you'll see under it.
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
.about-info hr {
position:absolute;
width: 100%;
right: 15px;
left: 15px;
top: 40%;
z-index: 0;
}
.about-info .text {
width:100px;
height:100px;
background:rgba(153,153,153,1);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto
}
.about-info .text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
EDIT #2:
Perhaps you can make the hr's opacity the same?
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
.about-info hr {
position:absolute;
width: 100%;
right: 15px;
left: 15px;
top: 40%;
z-index: 0;
background-color: rgba(153,153,153,0.1);
color: rgba(153,153,153,0.1);
height: 5px;
}
.about-info .text {
width:100px;
height:100px;
background:rgba(153,153,153,0.9);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto
}
.about-info .text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
EDIT #3: use 2 <hr> instead of 1.
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
hr {
position:absolute;
width: auto;
right: 5px;
left: 20px;
top: 30px;
color: red;
background-color: red;
color: red;
height: 2px;
border: 0;
}
.text {
width:100px;
height:100px;
background:rgba(153,153,153,0.9);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto;
}
.text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<div class="col-xs-2 col-xs-offset-1">
<div class="text pull-left">
<span>lorem</span>
</div>
</div>
<div class="col-xs-2">
<hr>
</div>
<div class="col-xs-2">
<div class="text text-center">
<span>lorem</span>
</div>
</div>
<div class="col-xs-2">
<hr>
</div>
<div class="col-xs-2">
<div class="text pull-right">
<span>lorem</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>