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
Post a Comment