[SmY]

Hi everyone,

I got a very challenging problem with hiding a part from a image.
I know how it works with image sprites, where you can hide a part of a image and select the part which represent your interest with "background-position".
But now I'm really stuck because I have to hide a part of every image shown in a class. And that class is showing random images with random height and width.

Details:
- that class represents the content of a post from a blog (Wordpress).
- all the posts are usually images because I have a photography blog.

What I wanted:
- a script which can post a watermark to every image I upload and stick with the bottom of the image.
- I wanted that watermark to stick with the bottom of the image but not to be shown on the website. Only when is downloaded or linked to other website.
- the watermark have a specific height of 20px.

What I did:
- I found a plugin: Watermark My Image
- the plugin is doing all I wanted, but the watermark is showing on my website too
- I tried to find a way to hide the watermark (part of image) on the website and didn't succeed.
- I know that I should make a .entry img {} in css.
- I tried to put in that ".entry img {}" the background-position and I played with other properties, but I couldn't find a way to resolve my problem.

I really appreciate if you can lead me to an answer to my problem. It is really annoying.

Thank you in advance!

[Dormilich]

the general problem is, when I see the picture without watermark, then I can simply make a screenshot and that’s it …

[SmY]

Yes, I know that.

I found a solution:

.entry { overflow: hidden }
.entry img { margin-bottom: -50px; }

Now the problem is that I have:

.entry img { border: 4px #CCC solid; margin-bottom: -50px; }

and the negative margin-bottom it's cutting the bottom border too. If you have any advice, I will appreciate. Meanwhile, I will try to find a solution for this problem too. Maybe an extra div with the border property will work.

[Dormilich]

do you have something to look at, it’s a bit hard to imagine?

[SmY]

Still I can't get it work because I need that border only if it's an image to display.
Can't figure it out... can someone help me with an advice?

[SmY]

This is the code:

<div class="entry">					
	<?php
	if ( get_option('content_home') == "true" )
		the_content('[...]');
	else
	the_excerpt();
        ?>
</div>

.entry {overflow:hidden !important; /* this is important */}
.imgpic img{
	display: block;
	overflow:visible !important;
	margin-bottom: 0px;
	border-bottom: 4px solid #bbb;
}
.entry img  {
	border: 4px solid #bbb;
	margin-bottom: -50px !important;
}

I already tried to put the content of "entry" class inside of a class named "imgpic" with this code:

.imgpic img{
	overflow:visible !important;
	margin-bottom: 0px;
	border-bottom: 4px solid #bbb;
}

but didn't work.

An advice, someone?

Sorry for double posting, but I don't see an Edit button.