jquery - is it possible to style the overflow of a div to have a lower opacity -

i trying implement twitter-like image cropper. have image loaded div handles cropping wonder there way can show overflow of div @ lower opacity inside div? cant find styling rules accomplish this.

<div style="position: relative; width: 300px; height: 300px;" class="jwc_frame"> <img src="data:image/" style="position: absolute; top: 0px; left: 0px; width: 300px;" class="jwc_image" id="preview"><div class="jwc_loader">upload image</div> </div> 

you may use trick: fiddle

inside container i've put 2 div same image. 1 "crop" , other full image , opacity (at half), make opacity image have overflow visible , place crop 1 on other position absolute.

.image {     width:400px;     height:300px;     overflow:visible;     opacity:0.5;  } .image-top {     width:400px;     height:300px;     overflow:hidden;     position:absolute;     top:0;     left:0; }