CODEWITHSUNDEEP
javascriptcsshtml
user3749553
user3749553

Reputation: 263

overflow not hidden but opacity changed

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>

Upvotes: 5

Views: 1937

Answers (3)

Pevara
Pevara

Reputation: 14310

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

Upvotes: 4

uber5001
uber5001

Reputation: 3964

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.

Upvotes: 3

gaurav5430
gaurav5430

Reputation: 13882

you can achieve a similar effect by having an absolute div, with same image, with less opacity and less z-index, and it would move around with your image as you move it, using start stop and drag functions.

see this fiddle for a example, there might be some lag sometimes, but consider this as a proof of concept.

http://jsfiddle.net/gaurav5430/vrUgs/1244/

accurate: http://jsfiddle.net/gaurav5430/vrUgs/1246/

Upvotes: 2

Related Questions