Home/ Questions/Q 6649363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:45:54+00:00

I’m trying to implement the equivalent of a css property: overflow: transparent 50%. For

  • 0

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 200×200 box to be normal. The part of the image that overflows the 200×200 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0