Creating a hole in a element

Question

Definition of Hole in a div - An element or a method by which you can show the background, only for a particular area, behind the content of a <div> element.

Answer 1

CSS box-shadow is supported in almost all modern browsers, so you can do what you want (I hope, I understood you right) this way:

body {
  margin: 0;
  padding: 0;
}

.hole {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg" alt="" style="width: 100%;">
<div class="hole"></div>

So, the block will be transparent, and all around it will be highlighted with its shadow.

Answer 2

A new way to solve this, using blend modes, and supporting border-radius, multiple elements... but without support in IE

.back {
 background-color: lightblue;
 width: 400px;
 height: 300px;
 background-image: repeating-linear-gradient(45deg, white 0px,lightblue 40px);
}

.base {
 position: relative;
 left: 10px;
 top: 10px;
 width: 200px;
 height: 200px;
 border: solid 1px black;
 background-color: white;
 mix-blend-mode: hard-light;
}

.hole {
 width: 80px;
 height: 50px;
 margin: 10px;
 border: solid 1px red; 
 border-radius: 10px;
 background-color: gray;
}

<div class="back">
 <div class="base">
  <div class="hole">ONE</div>
  <div class="hole">TWO</div>
 </div>
</div>

Answer 3

You can construct a set of frame divs in the following format:

So, one container div, with no/little style applied to it.

Then a set of 4 'border' divs with style applied to them, leavin the central area transparent.

Answer 4

Found it!

1. Parent div with a relative position, a transparent background and hidden overflow.
2. Child div with absolute position, with colored, super big borders to fill the background of the parent, and a transparent background.

The hole will be composed of a transparent child, with borders so big they fill up the parent's background. The positioning of the child will depend of the size of the borders. Set a background to whatever is behind the parent, and it will show through!

In this example you can see the red through the yellow faux background (which is actually a huge border).

#parent{overflow:hidden; position:relative;}
#child {position:absolute; border:9000px yellow solid; top:0; left:0;}

http://jsfiddle.net/CarambaMoreno/UrbhS/

What do you think?

Answer 5

I designed something on code pen that I think you are/were looking for. I was looking for the same... couldn't find anything so this is what I made

Demo

Answer 6

You can use a png with alpha channel transparency as the background image of your div.

<div style="background-image:url(pngwithtransparentarea.png);width:100px;height:100px;">
</div>

Answer 7

There's one approach, albeit it can only do mostly rectangular borders, with the following mark-up as a demo:

html:

<div id="wrap">
    <div id="frame">
    </div>
    <img src="http://farm3.static.flickr.com/2232/2299184911_ea1091968b_z.jpg?zz=1" />
</div>

css:

#wrap {
    overflow: hidden;
    position: relative;
}

#frame {
    border: 60px solid #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
}

Demo at JS Fiddle.

While there's no way to truly 'cut' a hole in a div, there is the possibility of using -webkit-mask-box-image to apply masks directly to images. Albeit this only works in, so far as I'm aware, Webkit browsers (I know that it's a -webkit vendor-prefixed property, but I don't believe that there's a -moz or -o equivalent, sadly).

Demo using the above, -webkit-mask-box-image property, at JS Fiddle.

Answer 8

The larger issue is not actually the background of the element you want to see through (which would just be background-color:transparent) but instead its ancestor element(s). For instance, a div with a background-color: transparent is still going to look as if it has a white background if its containing element has a white background. The best approach then is to define the background colors at lower levels in the page. For instance, if you want to see through div#see-through and it's a child of div#content which is in between div#header and div#footer, you could give #header and #footer background colors but define #content as transparent. Then assign background colors to the individual sibling elements of #see-through. One more thing: it might be helpful to remember when defining the transparent element that even a transparent element can have "colored" borders, meaning that you might be able to reach into in-between spots without adding extra elements.

Answer 9

After really thinking this through best thing i could come up with is if you use an iframe it could be the "lens" that views whatever you desire but ofcourse it wont work like a real lens but close to

Answer 10

If it's acceptable to use an SVG element instead of a div, SVG provides a flexible mechanism for cutting holes using the fill-rule="evenodd" attribute. You can create as many transparent regions of any shape as you'd like.

Here's an example that cuts two square holes into a gray square (also available as a JSFiddle):

<img
  src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg"
  style="position: absolute; width: 300px;"
>

<svg style="position: absolute; width: 300px; height: 300px;">
<!--
  This `path` element draws 3 squares:
    1. A gray 300x300 square
    2. A transparent 100x100 square
    3. Another transparent 100x100 square
  
  The key mechanism for creating transparent regions in the shape is
  `fill-rule="evenodd"`. This attribute affects pixel colors in the following
  way. Pick a pixel and draw an infinitely long line in any direction:
    - If the line crosses an odd number of lines, the pixel receives the fill
      color. In this fiddle, the infinite line extending from any gray pixel
      crossed an odd number of lines -- for example, just the line that is the
      perimeter of the gray rectangle.
    - If the line crosses an even number of lines, the pixel is transparent.
      In this fiddle, the infinite line extending from any transparent pixel
      crossed an even number of lines -- for example, the perimeters of the
      transparent square and the gray square.
-->
<path
  fill="grey"
  fill-rule="evenodd"
  d="
    M 0 0
    h 300
    v 300
    h -300
    Z
    
    M 25 50
    h 100
    v 100
    h -100
    Z
    
    M 175 50
    h 100
    v 100
    h -100
    Z
  "
/>
</svg>