CODEWITHSUNDEEP
jquerycss
rooivalk
rooivalk

Reputation: 187

Overflow hidden with different elements

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

Upvotes: 2

Views: 100

Answers (4)

John
John

Reputation: 6278

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

Upvotes: 1

Jon
Jon

Reputation: 26

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.

Upvotes: 0

LorDex
LorDex

Reputation: 2636

or use jquery:

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

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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

Upvotes: 0

Related Questions