I'm currently facing a challenge in moving an <hr> element behind my div element. I have already tried positioning, but it didn't work as expected. The <hr> is still visible through the white parts, most likely because they are transparent.
Perhaps my approach to achieving this is incorrect. You can see a working example here: Fiddle
My goal is to create a menu like this: https://i.sstatic.net/eptC7.png
Below is the CSS code I used:
.intro-text h1 {
font-weight: 700;
color: #ffa600;
font-size: 22px;
margin-bottom: 0;
}
.intro-text hr#myh {
margin: 0;
width: 100%;
background-color: #ffa600;
}
.intro-text div#myimgdiv {
margin-top: -20.5px;
text-align: center;
}
.intro-text span {
margin: 0 1.5vw;
}
.intro-text img {
border-radius: 50%;
width: 40px;
}
.make-border {
box-shadow: 0 0 0 2px #ffa909, 0 0 0 2px #ffffff;
}
And here is the corresponding HTML code:
<div class="col-sm-12 intro-text">
<h1>Set Room</h1>
<hr id="myh">
<div id="myimgdiv">
<span id="step1">
<img class="make-border" src="http://imgur.com/oq54SFb.png">
</span>
<span id="step2">
<img src="http://imgur.com/oq54SFb.png">
</span>
<span id="step3">
<img src="http://imgur.com/oq54SFb.png">
</span>
<span id="step4">
<img src="http://imgur.com/oq54SFb.png">
</span>
<span id="step5">
<img src="http://imgur.com/oq54SFb.png">
</span>
</div>
</div>