máscara de imagen transparente en css overflow

Question

Estoy tratando de implementar el equivalente de una propiedad css: "overflow: transparent 50%". Por ejemplo, si tengo esto:

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

me gustaría la parte de la imagen que aparece en el cuadro de 200x200 a ser normal. La parte de la imagen que desborda la caja de 200x200 quiero que sea parcialmente transparente. ¿Tal vez hay formas de hacerlo definiendo cuatro divs en todo el div principal? No estoy seguro de una manera fácil de hacer esto.

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

El ancho y la altura de la imagen se conocen de antemano. El div tendrá un javascript adjunto para permitir el reposicionamiento de la imagen arrastrando, por lo que el div actuará como una ventana gráfica, y la imagen podría desbordarse por cualquier lado. Necesita trabajar en todos los navegadores, idealmente.

Answer 1

No está seguro de lo bien que sería el apoyo del navegador, pero algo como esto debería empezar te:

<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> 

Editar: se olvidó de la JS violín Enlace. http://jsfiddle.net/BradleyStaples/rWzng/