So I have a draggable and resizable div (this part is working correctly) that needs to be masked so you can only see a certain part of the div at any time. For the mask I'm simply using overflow: hidden. My problem is, the resize handlers connected to .img-wrap are hidden underneath the mask and I need to be able to resize .img-wrap while it is masked. Any ideas as to how I can get them above the mask? You'll see in the fiddle below that you can't drag the edges of the div unless they're viewable.
UPDATED with JSFiddle: http://jsfiddle.net/yv332/
UPDATE #2: I had a thought to use custom handles that are outside of the element, but apparently they have to be a child of the resizable element.
HTML:
<div id="product">
<div class="img-wrap" style="background-image: url(someImage); width: 469px; height: 469px;"></div>
</div>
CSS:
#product {
display: inline-block;
overflow: hidden;
position: fixed;
right: 300px;
top: 100px;
z-index: 1;
width: 235px;
height: 469px;
}
.img-wrap {
background-size: cover;
cursor: move;
}
JS:
$("#product .img-wrap").resizable({
handles: "ne, nw, se, sw",
aspectRatio: $("#product .img-wrap").width() / $("#product .img-wrap").height()
}).draggable({
});
With an other mask(s), you can set the pointer-events:none; CSS property on them and get what you're looking for.
HTML:
<div id="product">
<div class="my-mask left"></div>
<div class="img-wrap" style="background-image: url(http://scontent-a.cdninstagram.com/hphotos-xpf1/t51.2885-15/10544275_544597625641458_1507697866_n.jpg); width: 469px; height: 469px;"></div>
<div class="my-mask right"></div>
</div>
CSS:
#product {
display: inline-block;
overflow: hidden;
position: fixed;
z-index: 1;
width: 100%;
height: 469px;
}
.img-wrap {
background-size: cover;
cursor: move;
}
.my-mask {
height:100%;
width:25%;
position:absolute;
top:0px;
background-color:red;
pointer-events:none;
z-index:2
}
.left {
left:0px;
}
.right {
right:0px;
}