Question

I need to create a div with rounded corners containing an image that can be dragged around, but part of the image is hidden by the div.

The client really wants the div to be a circle so it sort of has a looking glass effect on it, and they demand it to work on IE 8 at least, so I thought I’d go with the image based rounded corners method as follows:

<div class="looking-glass-images">
    <span class="tl"></span><span class="tr"></span>
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_008a-copy.jpg" width="1250" height="980" class="active" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_011.jpg" width="967" height="1250" class="inactive" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_012.jpg" width="1250" height="962" class="inactive" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Int_005.jpg" width="912" height="1250" class="inactive" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Int_008.jpg" width="1250" height="833" class="inactive" />
    <span class="bl"></span><span class="br"></span>
</div>

And the CSS:

.looking-glass-images{

    -moz-border-radius:50%;
    overflow:hidden;
    height:500px;
    width:500px;
    position:relative;
}

.looking-glass-images img{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    position:relative;
    top: -50%; left: -50%; bottom: -50%; right: -50%;
    z-index: -1;
}
.loking-glass-images .active{
    display:block;
}
.looking-glass-images .inactive{
    display:none;
}

.looking-glass-images > .tl, .looking-glass-images > .tr, .looking-glass-images > .bl, .looking-glass-images > .br{
    width: 250px;
    height:250px;
    position:absolute;
    background-image: url(build/css/ellipse.png);
    background-repeat: no-repeat;
    z-index: 1
}.looking-glass-images > .tl{
    background-position: top left;
    top: 0; left: 0;
}.looking-glass-images > .tr{
    background-position: top right;
    top: 0; left: 250px;
}.looking-glass-images > .bl{
    background-position: bottom left;
    top: 250px; left: 0;

}.looking-glass-images > .br{
    background-position: bottom right;
    top: 250px; left: 250px;
}

The problem is though that when I apply the jQuery draggable effect to the active image, I can’t move it, because it is under the corner spans. Is there a way to do rounded corners on IE 8 that I can also use jQuery draggable with?

Answer 1

Make the parent div draggable, not the images.

$(".looking-glass-images").draggable();