Geek Answers Handbook

Transparent image mask on css overflow

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

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

I want the portion of the image displayed in the 200x200 field to be normal. The part of the image that overflows the 200x200 block, I want to be partially transparent. Maybe there are ways to do this by defining four divs on all around the main div? I am not sure how to do this.

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

The width and height of the image are known in advance. Some javascript will be added to the div to allow the image to be moved by dragging and dropping, so the div will act as a viewport, and the image may overflow on either side. Ideally, you need to work in all browsers.

+5
1

, , - :

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

: JS Fiddle. http://jsfiddle.net/BradleyStaples/rWzng/

+2

More articles:


All Articles