jquery - html / css: create hole in a div -


essentially i'm trying achieve hole in middle of div. behind there 100% width div scroller, on top again 100% width div, hole in middle show through content underneath. @ minute i've achieved using transparent png background image, .test div behind need clickable i'm trying find better solution.
jsfiddle demo: http://jsfiddle.net/neal_fletcher/vmthl/1/
html:

<div class="test"></div> <div class="background-image"></div> 

css:

.test {     position: absolute;     width: 100%; height: 240px;     background-color: red;     top: 0; left: 0;     z-index: 1;     cursor: pointer; }  .background-image {     position: absolute;      width: 100%; height: 240px;      top: 0; left: 0;     z-index: 2;      background-image:url('http://oi42.tinypic.com/2ziwodd.jpg');      background-repeat:no-repeat; background-position:center;" } 

visually i'm after, .test div needs clickable too, suggestions appreciated!

use 2 divs. 1 left side , 1 right side. need have width < 50% hole between them.


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -