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='.5.js'></script>
<script type="text/javascript" src=".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=".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=".png" />
</div>
</div>
<style>
#frame {
height: 500px;
width: 500px;
overflow: hidden;
border: 1px solid black;
}
</style>
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./jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis./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./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./audio/stackoverflow-300.png" />
</div>
</div>
<style>
#frame {
height: 500px;
width: 500px;
overflow: hidden;
border: 1px solid black;
}
</style>
- “In my fiddle you can drag the image around” – is that integral to the sought for solution? – C3roe Commented Aug 1, 2014 at 20:39
3 Answers
Reset to default 4Allow 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
Oooh. A cool, but tricky idea.
As far as I know, there's no easy way to do this without javascript.
My remendation is to include 2 images:
- The
overflow: hidden;image. This will work exactly as you have in your demo. - The
opacity: 0.5image. 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 remend 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.
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/gaurav5430/vrUgs/1244/
accurate: http://jsfiddle/gaurav5430/vrUgs/1246/