Question

I need to create with html and css, somekind of a “masking div”.
What I want is the following:

I am using jQueryUI, I want to have the ability to drag the image inside the masking div only, in away that if the image is out of the bounds of the #maskingDiv, that section section will be hidden behind the #maskingDiv.

Any ideas?
Thanks in advace.

Answer 1

I think you have it backwards. The masking div will likely be smaller than the image. The mask will have a fixed width and height and overflow:hidden if you’d like to have an <img /> tag within it. The easier was to do this however, is put the image as a background-image of the #maskingDiv and apply a offsetted background-postiion