Use CSS to obscure part of an image?

[Dylan Leblanc]

Hi,

I am wondering if there is a way to cover up the bottom part of an image using CSS, or maybe DHTML (but I don't know anything about DHTML).

Say for instance I have a regular JPEG image and display it using an <img src=""> tag. But, the image has a strip across the bottom with copyright text on it. Is there a way to obscure this strip so the user does not see the unaesthetic copyright text?

I assume if there is any way to do this that the dimensions of the image would need to be known. That is okay. It would be like taking a 500 x 320 pixel image, but allowing only the top 500 x 300 pixels to be shown, while still using the regular <img src=""> tag. Additionally, it would be best if it were possible to display other objects directly beneath this image, so the 20 pixels which are obscured would not leave a blank line.

I know how to do this using tables and background images, but want to do it using the regular image tag.

[Algorithm]

<div style="width:500px;height:300px;overflow:hidden"><img src="" /></div>

[Dylan Leblanc]

Thanks, that does the trick!

[brothercake]

you also have clip:

clip:rect(0px,500px,300px,0px);

[Dylan Leblanc]

Oh, thats even better! :)

[BrainJar]

You could also edit the image and crop it to whatever you like.

But, if it's not your image, you shouldn't be removing any copyright information without the owner's consent. Even if they've given blanket permission to use it, they obviously put that notice on there for a reason.

[Tails]

Clipping doesn't work for me. Does that not work on IE 5.0? What's it do in case it did work and I was unable to tell?

[brothercake]

Oh sorry .. it only works on absolutely positioned elements

<div style="position:absolute;left:10px;top:10px;width:500px;height:500px;background-color:red;clip:rect(0px,50px,100px,0px)"></div>


And equally .. what BrainJar said

[Tails]

Oh cool. I'm going to try that. I just learned the overflow:hidden style to hide image areas.

[Roy Sinclair]

Originally posted by BrainJar
You could also edit the image and crop it to whatever you like.

But, if it's not your image, you shouldn't be removing any copyright information without the owner's consent. Even if they've given blanket permission to use it, they obviously put that notice on there for a reason.

Good points but if it is their image and they want to make sure the copyright is attached to the image if someone grabs it but they don't want it to be showing on the pages where they use it themselves then I'd say this is a good technique.

[Tails]

I tried absolutely positioning a div and then using the clip stuff and the image disappears every time. Is that supposed to happen? Clipping does apply to images, right? Actually, I don't know what clipping does, so I don't know what to expect or when to use it. Help please?