turning a div into transparent to see through two containers

Question

I have following markup

Answer 1

I'm about to just make 5 divs with 1 in the center all inside of a parent. Parent is transparent and your circle would be too. Surrounded on all 4 sides with ::before & ::after elements that aren't transparent to tighten up the seams... hope that helps.

Answer 2

What you are asking to do will not work using transparency.

However, there is a work around that is quite acceptable:

body {
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}
.holder {
    width: 500px;
    height: 700px;
    background: rgba(255,255,255,0.8);
    border: 1px dotted blue;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}

see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/

Just apply the same background image to the .circle div.

This trick is taken from one of the CSS books by Eric Meyer.

Answer 3

The 4th number in rgba() is the alpha transparency. You've set it to 0, which is completely transparent. 1 would be completely opaque. You need to set that to some value between 0 and 1.

That said, if you are trying to create the effect of a hole, then what you need to do is create a background image that is white and has a transparent circle cut in it and make that the background to .holder. It doesn't matter how transparent you make .circle if .holder is completely opaque!

Answer 4

may be you should try it by adding opacity: value attribute or by setting its background-color: rgba(0,0,0,value)

Value must be between 0 to 1.