transparent image mask on css overflow

Question

I'm trying to implement the equivalent of a css property: "overflow: transparent 50%". For example, if I have this:

<div style="border: 1px solid black; width: 200px; height: 200px; overflow: visible;">
 <img src="img.png">
</div>

I'd like the part of the image displayed in the 200x200 box to be normal. The part of the image that overflows the 200x200 box I want to be partially transparent. Maybe there's ways to do this by defining four divs on all around the main div? I'm not sure of an easy way to do this.

+------------------+
| img overflow,    |
| 50% transparent  |
|  +------------+  |
|  | normal img |  |
|  +------------+  |
|                  |
+------------------+

Image width and height is known before hand. The div will have some javascript attached to it to allow for image repositioning by dragging, so the div will act like a viewport, and the image could overflow on any side. Needs to work in all browsers, ideally.

Answer 1

Not sure how well browser support would be, but something like this should start you off:

 <style>
     /* .container needs to be same size at img */
     .container {width:400px; height:400px; background:#00f; opacity:0.5; margin:0 auto; position:relative; z-index:1;}
     /* .container:before 1/4 img width, 1/2 img height, left 0, top 1/4 img, */
     .container:before {content:""; display:block; width:100px; height:200px; position:absolute; left:0px; top:100px; z-index:15; background:#0f0; opacity:0.5;}
     /* .container:before 1/4 img width, 1/2 img height, left 3/4 img, top 1/4 img */
     .container:after {content:""; display:block; width:100px; height:200px; position:absolute; left:300px; top:100px; z-index:15; background:#0f0; opacity:0.5;}
     /* .img would be your actual img at full size */
     .img {display:block; width:400px; height:400px; position:absolute; z-index:10; background:#f00;}
     /* .img:before same width as img, 1/4 height, top 0, left 0 */
     .img:before {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:0px; z-index:15; background:#00f; opacity:0.5;}
     /* .img:after same width as img, 1/4 height, top 3/4 img height, left 0 */
     .img:after {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:300px; z-index:15; background:#00f; opacity:0.5;}
 </style>
 <div class="container">
   <span class="img"></span>
 </div>

Edit: forgot the JS Fiddle Link. http://jsfiddle.net/BradleyStaples/rWzng/