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 center of the div, so you can see a the line through the div. I could make the div opaque, but I wan't to show the background. So, is there a way of hiding specific elements that are behind a div, but show the background of the page? Even if it's using js/jquery.

Here's my simulated situation (in my code lines generate automatically):

https://jsfiddle.net/muud6rqf/2/

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

.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);
}

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

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

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

EDIT: This is what it looks like:

This is how I want it:

Instead of using a div w/ a css circle, why not just use a circle.png as the background for that div? — Zze, Jul 15 '16 at 03:35
Ok I'll edit sorry for no code but please don't downvote they will delete the post :( — ALSD Minecraft, Jul 15 '16 at 03:38
Hey! your recently posted fiddle is interesting. I suggest to you that you edit your question to make it more precise. Paragraph it! Nail the question... What you try to do looks a bit complicated from a concept point of view. What do you want to do ? I upvoted to counter the downs ;) — Louys Patrice Bessette, Jul 15 '16 at 03:50
These 2 images REALLY help to understand ! I'm not sure I can answer. But now, question is clear. ;) I will think. — Louys Patrice Bessette, Jul 15 '16 at 03:58
Thanks, I mean, I could easily make them opaque, but I want to solve this problem rather than just give up. — ALSD Minecraft, Jul 15 '16 at 04:00
ok... You need a script to calculate the distance between the 2 circles. — Louys Patrice Bessette, Jul 15 '16 at 04:04
Hold on... You have no script at all here. You have to think about cutting the line lenght of both circle radius and reposition the line a the right place. I'm on it. This is a VERY COOL math problem. But give me a little time. — Louys Patrice Bessette, Jul 15 '16 at 04:15
You have a REAL cool and surprising (for me) answer from @Rohit below that fully answer your question as it is now. This works for your CSS defined position for the 2 circles. I was on the problem of calculating the distance between the 2 circles... Which could be positionned somewhere else just via HTML. But I may be out of the question scope. Anyway I forked the Fiddle... And will think about it. — Louys Patrice Bessette, Jul 15 '16 at 04:54

Rohit · Accepted Answer · 2020-03-14T08:35:44.420

9

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>

edited Mar 14 '20 at 08:35

answered Jul 15 '16 at 04:37

Rohit

1,794
1
8
16

It is that simple? Wow thanks, one more question, what if the line was generated in a canvas which is "uncle" of the circles (the canvas is the sibling of the parent of the circles)? I tried using your solution there but it doesn't work – ALSD Minecraft Jul 15 '16 at 04:50
Can you share the fiddle? – Rohit Jul 15 '16 at 04:54
1

https://jsfiddle.net/muud6rqf/3/ drag the circles, I changed the code and now canvas is sibling of the circles – ALSD Minecraft Jul 15 '16 at 05:06
1

Add `background:inherit` to `.circle` class. See [https://jsfiddle.net/muud6rqf/4/](https://jsfiddle.net/muud6rqf/4/) – Rohit Jul 15 '16 at 05:09
1

Do you know that feeling when the code works in the demo fiddle but not in your project? :( I'll check for my code, but this is the correct answer, thanks! – ALSD Minecraft Jul 15 '16 at 05:16
1

I know the feeling mahn :) Welcome – Rohit Jul 15 '16 at 05:17
1

I guess I still have a lot to learn... This is impressive. Thumbs up to you both. – Louys Patrice Bessette Jul 15 '16 at 05:22
1

We all are learning here from each other problems and I feel SO is good platform. – Rohit Jul 15 '16 at 05:26
2

The jsfiddle doesn't work for me and shows the line inside the circles (both Chrome and Firefox). Is this still supposed to work? – Sébastien Tromp Jan 21 '20 at 09:46
@SébastienTromp Fiddle should work for you, I think background image got removed from source, I have updated the answer and used background color instead, you can see the result now. Let me know what are you trying to achieve. – Rohit Mar 14 '20 at 08:37
Fiddle not working on Chrome. Shows line inside circle. – Camilo Aug 02 '21 at 02:10

Hide elements behind transparent DIV but not background

1 Answers1

Linked