...

View Full Version : CSS image mask?



fodden
09-24-2004, 04:47 PM
Greetings all.

Can I do this with CSS: I want to display only a portion of an image, in effect to mask the rest of the image. For instance, if I have an image 1200px by 1600px, I want to show only a slice of it, say 450px by 100px. I can imagine how, if a "window" can be created, it could be located by coordinates within the larger image itself. But I can't figure out whether and how this "peek" of something larger might be done.

Thanks for any suggestions.

Cheers,

Simon

brothercake
09-24-2004, 05:00 PM
clip is what you want - http://www.w3schools.com/css/pr_pos_clip.asp

Note that the criteria for clip have changed between CSS2 and 2.1 - an element must now be absolutely positioned to have clip, and clip can be applied to elements with hidden overflow.

fodden
09-24-2004, 05:29 PM
Yes! Thanks a million. This does the trick.

Once again this forum comes through. What a pleasure to find such helpful people.

Cheers,

Simon

fodden
09-24-2004, 09:00 PM
May I come back for one more bite at the cherry?

I've got the image to do what I want, using overflow:hidden on the containing paragraph. And I've got a fancy effect I'm playing with, where I have an offset border, using a relatively positioned, empty paragraph with a border. (see screenshot (http://www.fodden.com/screenshot.gif) ) But I've got a stubborn gap between the two prior paragraph elements and the next paragraph, which would be a normal text paragraph. I think the problem is that when I displaced the fancy effect border paragraph by 90px (to overlap it on the image) it left a 90 px space. How do I get the flow to resume without the gap?

My html is:

<p class="imagep"><img src="/images/7numbersmenu.jpg"></p>
<p class="imagepx"></p><p>this is now a test</p>

My immediately relevant CSS is:

.imagep {
position:relative;
left:-35px;
margin-bottom:0;
padding:0;
overflow:hidden;
width:470px;
height:90px;
}

.imagepx {
border:thin solid gray;
position: relative;
top:-90px;
left:-25px;
width:470px;
height:90px;
margin-bottom:-90px;
padding:0;
}


Thanks,

Simon



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum