Overlapping transparent divs with one border

Overlapping transparent divs

I recently came upon a question on http://stackoverflow.com. A user asked if it was possible to have two transparent divs that overlap and force the overlapping section to have the same opacity.

His example looked like this:

<div id="foo">
    <div id="bar">
    </div>
</div>

#foo{
    height:50px;
    width:250px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    color: #fff;
    padding:50px;
}

#bar{
    height:200px;
    width:200px;
    background-color: rgba(0,0,0,0.6);
    -webkit-transform: rotate(180deg);
    border-radius:200px;
    position:absolute;
    top:-100px;
    left:-100px;
    color: #fff;
}

FIDDLE

This was a very interesting question, because I had the same problem once, but I didn’t bother about it, because I could just make the box solid and then add opacity: 0.6

#foo{
    height:50px;
    width:250px;
    background:rgb(0, 0, 0);
    position:absolute;
    left:150px;
    top:150px;
    color: #fff;
    padding:50px;
    opacity:0.6;
}
#bar{
    height:200px;
    width:200px;
    background-color: rgb(0,0,0);
    -webkit-transform: rotate(180deg);
    border-radius:200px;
    position:absolute;
    top:-100px;
    left:-100px;
    color: #fff;
}

It looks like this:
FIDDLE

But this user needed to have opaque content inside the box and an image or canvas inside the circle.

Tough question?

No actually it popped to my mind within a second.
Sadly I was not at home and could not write the code. So as soon as I got home I started, realizing that I had come up with something that I could probably use very often.

The Idea

My first thought was, to create a pattern for the background. this would give the circle a pacman shape.

Here’s the pattern I used:

    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));

the opacity is then set to 0.6

#foo{
    height:50px;
    width:250px;
    background:rgba(0, 0, 0,0.6);
    position:absolute;
    left:150px;
    top:150px;
    color: #fff;
    padding:50px;
}
#bar{
    height:200px;
    width:200px;
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    -webkit-transform: rotate(180deg);
    border-radius:200px;
    position:absolute;
    top:-100px;
    left:-100px;
    color: #fff;
    opacity:0.6;
}

Result:
FIDDLE

But now the content of the circle would be semi-transparent too.

Using pseudo-elements

Well there are still the :before and :after pseudoelements
So I made the circle a pseudo element which solved the issue.

#foo{
    height:50px;
    width:250px;
    background:rgba(0, 0, 0,0.6);
    position:absolute;
    left:150px;
    top:150px;
    color: #fff;
    padding:50px;
}
#bar {
    position:absolute;
    top:-100px;
    left:-100px;
    height:100px;
    width:100px;
    padding:50px;
    z-index:1;
}
#bar:after{
    content: '';
    height:200px;
    width:200px;
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    -webkit-transform: rotate(180deg);
    border-radius:200px;
    position:absolute;
    top:0;
    left:-0;
    color: #fff;
    opacity:0.6;
    z-index:-1;
}

FIDDLE

So the question was answered, but I didn’t feel happy.

There have to be more options to this,

Adding a border and box shadow

First I used a different shape than the circle.
With a little thinking I was able to add a border and a box shadow to the element.

#foo{
    height:110px;
    width:250px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    padding:20px;
    padding-left:120px;
    border-right: 2px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid rgba(255,255,255,0.5);
    color:rgb(255,255,255);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);  
}
#foo:before {
    content:'';
    position:absolute;
    top:-100px;
    left:100px;
    width: 288px;
    height:100px;
    border-left: 2px solid rgba(255,255,255,0.5);    
    border-bottom: 2px solid rgba(255,255,255,0.5); 
  box-shadow: 10px -5px 5px -5px rgba(0,0,0,0.5) inset;  
}
#foo:after {
    content:'';
    position:absolute;
    top:100px;
    left:-100px;
    width: 100px;
    height:48px;
    border-right: 2px solid rgba(255,255,255,0.5);    
    border-top: 2px solid rgba(255,255,255,0.5);    
  box-shadow: -5px 10px 5px -5px rgba(0,0,0,0.5) inset;  
}
#bar {
    position:absolute;
    top:-75px;
    left:-75px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;
}
#bar:before{
    content: '';
    height:198px;
    width:198px;
    background: none;
    border-right:2px solid rgb(255,255,255);
    border-bottom:2px solid rgb(255,255,255);
    opacity: 0.5;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:-25px;
    left:-25px;
    border-bottom-right-radius: 200px;
}
#bar:after {
    content: '';
    height:200px;
    width:200px;
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:-25px;
    left:-25px;
    border-bottom-right-radius: 200px;
    z-index:-1;

}

FIDDLE
.

But I wanted to apply the border to the circle.
Well using a -webkit-mask-image it works. (but sadly without the shadow.

#foo{
    height:110px;
    width:250px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    padding:20px;
    padding-left:120px;
    border-right: 2px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid rgba(255,255,255,0.5);
    color:rgb(255,255,255);
}
#foo:before {
    content:'';
    position:absolute;
    top:0px;
    left:100px;
    width: 290px;
    height:0px;
    border-bottom: 2px solid rgba(255,255,255,0.5); 
}
#foo:after {
    content:'';
    position:absolute;
    top:100px;
    left:0px;
    width: 0px;
    height:50px;
    border-right: 2px solid rgba(255,255,255,0.5);    
}
#bar {
    position:absolute;
    top:-100px;
    left:-100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;
}
#bar:after{
    content: '';
    height:196px;
    width:196px;
    background: none;
    border:2px solid rgb(255,255,255);
    opacity: 0.5;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    z-index:-1;
}

FIDDLE

More circles?

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
</div>

#foo{
    height:100px;
    width:100px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    padding:50px;
    color:rgb(255,255,255);
}
#bar1 {
    position:absolute;
    top:-100px;
    left:-100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;
}
#bar1:after{
    content: '';
    height:196px;
    width:196px;
    border: white 2px solid;
    background: #000;
    opacity: 0.5;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    z-index:-1;
}
#bar2 {
    position:absolute;
    top:-100px;
    left:100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;
}
#bar2:after{
    content: '';
    height:196px;
    width:196px;
    border: white 2px solid;
    background: #000;
    opacity: 0.5;
    -webkit-transform: rotate(-90deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
     opacity: 0.6;
    z-index:-1;
}
#bar3 {
    position:absolute;
    top:100px;
    left:100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;
}
#bar3:after{
    content: '';
    height:196px;
    width:196px;
    border: white 2px solid;
    background: #000;
    opacity: 0.5;
    -webkit-transform: rotate(0deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    z-index:-1;
}
#bar4 {
    position:absolute;
    top:100px;
    left:-100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;
}
#bar4:after{
    content: '';
    height:196px;
    width:196px;
    border: white 2px solid;
    background: #000;
    opacity: 0.5;
    -webkit-transform: rotate(90deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    z-index:-1;
}

FIDDLE

Incoming search terms:

html5 overlapping divs,

About
Latest Posts

Follow me

Gregor Adams

web developer at Codefights

Hi, I am a web-programmer and frontend-developer from Germany.
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.

Follow me

Latest posts by Gregor Adams (see all)

Forget Lesshat – More-or-less is smarter and faster - April 6, 2014
cross browser custom scrollbars with jQuery and CSS3 – replicating the fading scrollbars from OS X Lion or Mountain Lion - May 21, 2013
arrow button in pure CSS & HTML iOS 6| CSS3 HTML5 Back button - March 9, 2013

Pingback: pure CSS tooltips - transparent, border, box-shadow | CSS3, tutorials…it's a dream world()
mitch

hey…i have a question that will probably be simple for you regarding trans boxes…email me at [email protected] thanks!
al404

your examples doesn’t work in firefox, and i guess on IE too, it works only on webkit bases browsers
- pixelass
  
  as mentioned in the attached stackoverflow article, this was made for a user-question on webkit based browsers (iOS). This technique can be made compatible for all browsers. (IE needs a different technique)