Overflow hidden with different elements

Question

is it possible to hide the exceeding element (i.e. photo) IF the said element is a different element (i.e. not child element) from its frame?

so usually we have frame element and its child like this:

<div id="frame">
   <img src="xyz" />
</div>
with css:
#frame {overflow:hidden;}

but what if I need the exact same function with this situation:

<div id="frame">
</div>
<img src="xyz" />

for the example: http://jsfiddle.net/t7EgU/2/

and this is current result and the result I expect: http://i44.tinypic.com/hs0yv8.jpg

is there a way to solve this?

thx :)

you cannot entirely hide your image behind something wich opacty is less than 1 (image or bg color). — G-Cyrillus
– G-Cyrillus, Commented Jul 23, 2013 at 12:55

John · Accepted Answer · 2013-07-23 12:52:16Z

1

Instead of dragging around the div, you could set the image as a

background-image

and the set the

background-position

to move the image around within the div.

In this example, I have the photo element invisible and the "window" I created match it

http://jsfiddle.net/t7EgU/16/

enter image description here

edited Jul 23, 2013 at 12:52

answered Jul 23, 2013 at 12:32

John

6,3274 gold badges48 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabrizio Calderan · Accepted Answer · 2013-07-23 12:28:31Z

0

if you need to support only modern browser you may use :not(:empty), like so

#frame:not(:empty) {
  overflow: hidden;
}

A simple usage demo: http://jsbin.com/egatij/1/edit

answered Jul 23, 2013 at 12:28

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Comments

LorDex · Accepted Answer · 2013-07-23 12:29:42Z

0

or use jquery:

if ($('#frame').children().length != 0 ))
$(this).css('overflow': 'hidden');

answered Jul 23, 2013 at 12:29

LorDex

2,6382 gold badges22 silver badges33 bronze badges

Comments

Jon · Accepted Answer · 2013-07-23 12:47:37Z

0

Looking at the photos you posted this could be a simple z-index issue, if you wanted the frame to be on top give it a higher z-index.

For example:

#frame { position:relative; z-index: 2;}
img { position:relative; z-index:1;}

But then looking at the jsfiddle you added along with your question, it uses a png so maybe there is a slight opacity on the image itself. Maybe if you re-saved the image with 100% opacity you will, possibly, get the solid frame you were expecting.

answered Jul 23, 2013 at 12:47

Jon

263 bronze badges

Collectives™ on Stack Overflow

Overflow hidden with different elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related