Hide elements behind transparent DIV but not background

Question

so I have circled divs (with border-radius) and each one is connected with a line. Problem is that they are semi-transparent, and they\'re connected from the ce

Answer 1

Its a little hack with z-index, I don't know if it can be a good solution for you or not but you can have look at snippet.

Add z-index:-1 to .simulated-line so line will goes back to circle.

Add background: inherit; to .circle so background gets filled.

body{
  background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed;
  background-size: cover;
  background-color: #000;
}

.circle{
  border: 2px solid red;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  position: absolute;
  box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6);
  background: inherit;
}

.simulated-line{
  position: absolute;
  width: 181px;
  height: 4px;
  background: green;
  top: 64px;
  left: 118px;
  transform-origin: 0% 50%;
  transform: rotate(25deg);
   z-index: -1;
}

<div class="circle" style="left: 100px; top: 46px"></div>

<div class="circle" style="left: 260px; top: 121px"></div>
  
<div class="simulated-line"></div>