5 Replies - 808 Views - Last Post: 04 November 2011 - 11:15 AM

#1 SmY  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-November 11

Challenging problem with hiding a part from a image

Posted 04 November 2011 - 09:15 AM

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!

Is This A Good Question/Topic? 0
  • +

Replies To: Challenging problem with hiding a part from a image

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,226
  • Joined: 08-June 10

Re: Challenging problem with hiding a part from a image

Posted 04 November 2011 - 10:11 AM

the general problem is, when I see the picture without watermark, then I can simply make a screenshot and thatís it Ö
Was This Post Helpful? 0
  • +
  • -

#3 SmY  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-November 11

Re: Challenging problem with hiding a part from a image

Posted 04 November 2011 - 10:16 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,226
  • Joined: 08-June 10

Re: Challenging problem with hiding a part from a image

Posted 04 November 2011 - 10:21 AM

do you have something to look at, itís a bit hard to imagine?
Was This Post Helpful? 0
  • +
  • -

#5 SmY  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-November 11

Re: Challenging problem with hiding a part from a image

Posted 04 November 2011 - 11:10 AM

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?
Was This Post Helpful? 0
  • +
  • -

#6 SmY  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-November 11

Re: Challenging problem with hiding a part from a image

Posted 04 November 2011 - 11:15 AM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1