overflow not hidden but opacity changed

Question

Is it possible to make the overflow not hidden but just change the opacity of the content that is overflowing?

So that the parts of the content that are going outside the parent div has opacity of .5 but the parts that remain in the parent are normal?

This would require JavaScript I am assuming if anyone could get me off in the right direction I would be very appreciative. In my fiddle you can drag the image around. FIDDLE

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>




<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('#img_rnd').resizable();
    $('#rnd').draggable({
        appendTo: 'body',
        start: function(event, ui) {
        isDraggingMedia = true;
    },
        stop: function(event, ui) {
        isDraggingMedia = false;
    }
});
});//]]>  

</script>


<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />

<div id="frame">
    <div id="rnd" style="display:inline-block">
    <img id="img_rnd" style="border:1px solid red" src="http://blog.stackoverflow.com/audio/stackoverflow-300.png" />
</div>

</div>

<style>

#frame {
      height: 500px;
      width: 500px;
      overflow: hidden;
      border: 1px solid black;
}
</style>

Answer 1

Allow me to think outside the box here. Why, in stead of applying an opacity, don't you overlay your picture with something semi transparent... Something like this:

#frame:after {
    content: '';
    display: block;
    position: absolute;
    background: transparent;
    z-index: 1;
    pointer-events: none;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    box-shadow: 0 0 0 5000px rgba(255,255,255,.5);
}

It may be a bit hacky, but it works, and with just css. Have a look at the updated fiddle

Answer 2

Oooh. A cool, but tricky idea.

As far as I know, there's no easy way to do this without javascript.

My recommendation is to include 2 images:

• The overflow: hidden; image. This will work exactly as you have in your demo.
• The opacity: 0.5 image. This is the image that will show up outside of the parent. In fact, in order to show up outside of the parent, it must be just that: a sibling of the parent.

With this you can have the inner area of the parent show the overflow: hidden;, and the outer area of the parent show the opacity: 0.5.

If you take this approach, I'd recommend keeping all of the event handlers on the slightly opaque one, as that will always be on top, even when the image is entirely outside of the frame!

Here's the fiddle.