CSS gurus inside please....watermarking with css - GoFuckYourself.com

Oracle Porn · 02-07-2010, 09:01 AM

im trying to watermark some thumbs

Code:

 a img{
	border: 1px solid #000000;
	width: 240px;
        height: 180px;
  	background:transparent url(play.png) bottom right no-repeat;

it works but the only problem is that my original thumb i want to watermark is OVER the play.png instead of UNDER it, anyone knows what i need to add? searching google for too long now

thanks

grumpy · 02-07-2010, 09:06 AM

make your image the background, put the watermark over it as a thumb

SmellyNose · 02-07-2010, 09:10 AM

Quote:

Originally Posted by grumpy

make your image the background, put the watermark over it as a thumb

!rucnoc I

Va2k · 02-07-2010, 09:13 AM

Yea what grump said!

quantum-x · 02-07-2010, 09:15 AM

SmellyNose · 02-07-2010, 09:17 AM

Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway.

Code:

composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg

Or, you could do something like this (untested):

Code:

for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

Oracle Porn · 02-07-2010, 09:17 AM

shit that would be impossible

no way around it?

Oracle Porn · 02-07-2010, 09:19 AM

Quote:

Originally Posted by AdultStoriesNow

Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway.

Code:

composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg

Or, you could do something like this (untested):

Code:

for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

since these are thumbs that watermark is just a "play button", i have no need to hard watermark it. thanks for this anyway, worse come to worse ill do it.

SmellyNose · 02-07-2010, 09:24 AM

Or if your site is in PHP you could do something like this:

Code:

$base_dir = getcwd(); // meh
$f_file = $base_dir . $file;
$w_file = $base_dir . "/watermarked/".$file;
$water_file = $base_dir.'watermark.png';

$file = $_GET['file']; // Add security measures
header("Content-Type: image/jpeg");

if(!file_exists($f_file)) {
   readfile($base_dir . "invalid_image.jpg");
   exit;
}

if(!file_exists($w_file)) {
   readfile($w_dir);
   exit;
}

//Borrowed from http://articles.sitepoint.com/article/watermark-images-php as this is in a quick reply box so won't be writing new code as this is an example/idea :P

$watermark = imagecreatefrompng($water_file);
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($f_file);
$size = getimagesize($f_file);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark);

//Some code here to put the watermarked image into $base_dir . 'watermarked/'.$file so the image is cached for next time

SmellyNose · 02-07-2010, 09:27 AM

Ahhhh. If that's the case then the background-image being the actual thumb is best. Why can't you do that?

calmlikeabomb · 02-07-2010, 09:52 AM

It's called using the z-index and it only works when elements have a set position type.

Also, it's pointless and you should be using PHP or another language/software to create images with real water marks.

Oracle Porn · 02-07-2010, 09:54 AM

Quote:

Originally Posted by AdultStoriesNow

Or if your site is in PHP you could do something like this:

Code:

$base_dir = getcwd(); // meh
$f_file = $base_dir . $file;
$w_file = $base_dir . "/watermarked/".$file;
$water_file = $base_dir.'watermark.png';

$file = $_GET['file']; // Add security measures
header("Content-Type: image/jpeg");

if(!file_exists($f_file)) {
   readfile($base_dir . "invalid_image.jpg");
   exit;
}

if(!file_exists($w_file)) {
   readfile($w_dir);
   exit;
}

//Borrowed from http://articles.sitepoint.com/article/watermark-images-php as this is in a quick reply box so won't be writing new code as this is an example/idea :P

$watermark = imagecreatefrompng($water_file);
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($f_file);
$size = getimagesize($f_file);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark);

//Some code here to put the watermarked image into $base_dir . 'watermarked/'.$file so the image is cached for next time

thanks ill try it, i can't edit that actually page but only the css header and footer (not actually content aka thumbs)...thats the script i use

SmellyNose · 02-07-2010, 09:56 AM

Quote:

Originally Posted by Oracle Porn

thanks ill try it, i can't edit that actually page but only the css...thats the script i use

What does your HTML and CSS look like?

Might be able to come up with something if we can see the layout of the HTML.

Though, I definitely think you should edit the script you're using and do it by setting your image to the background image, and using the thumb image in <img src=''>

MetaMan · 02-07-2010, 10:00 AM

position: relative;
z-index: 0;

then for the overtop

position: relative;
z-index: 1;

then just use margin to adjust it over top of the thumb.
i suggest putting both inside a div.

fris · 02-07-2010, 10:03 AM

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

Oracle Porn · 02-07-2010, 10:18 AM

Quote:

Originally Posted by fris

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

looks like this will be the only thing that will work, what i was originally looking for is the inverted version of this script, to always show the play button and on hover make it disappear.

mafia_man · 02-07-2010, 11:54 AM

Z-Index is the solution to what you are asking but it's not a good idea to watermark using CSS as people can still easily steal your photos.

Imagemagick is a tool you can use to watermark images on-the-fly either during upload or delivery.

Oracle Porn · 02-07-2010, 12:08 PM

z-index didn't seem to work cuz i cant edit actual html. the java posted above works, i need to invert it somehow.

MetaMan · 02-07-2010, 12:19 PM

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

quantum-x · 02-07-2010, 01:03 PM

Quote:

Originally Posted by calmlikeabomb

It's called using the z-index and it only works when elements have a set position type.

Also, it's pointless and you should be using PHP or another language/software to create images with real water marks.

You're an idiot.

Mutt · 02-07-2010, 01:26 PM

the problem with using the thumbnail as a background image is that it is unclickable no?

i don't see the problem using CSS to add a watermark -look at all the TGP's that use CSS to add a little 'NEW' graphic on top of their thumbnails.

Oracle Porn · 02-07-2010, 01:55 PM

Quote:

Originally Posted by MetaMan

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

ofcourse z-index works, just not with this problem
like i said i can not edit html itself only the css

here is the html code

Code:

					
<div class="img">
<a   target='_blank'   href="http://www.link.com"><img src="thumb.jpg" width="240" height="180" id="thumbs4" name="thumbs4" alt="video" /></a>
</div>

Oracle Porn · 02-07-2010, 01:56 PM

Quote:

Originally Posted by Mutt

the problem with using the thumbnail as a background image is that it is unclickable no?

i don't see the problem using CSS to add a watermark -look at all the TGP's that use CSS to add a little 'NEW' graphic on top of their thumbnails.

since its just a background i guess the original thumb with a link under it should work

JD · 02-07-2010, 02:59 PM

not being able to edit the html sucks :/ why cant you edit it btw?

Deej · 02-07-2010, 03:38 PM

Quote:

Originally Posted by MetaMan

position: relative;
z-index: 0;

then for the overtop

position: relative;
z-index: 1;

then just use margin to adjust it over top of the thumb.
i suggest putting both inside a div.

Quote:

Originally Posted by MetaMan

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

completely awesome and the new avatar is totally freakin me out

Oracle Porn · 02-07-2010, 04:35 PM

thanks everyone for the help, i figured it out with the javascript fris posted

bns666 · 02-08-2010, 05:29 AM

Quote:

Originally Posted by fris

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

for this, read this post exactly when i needed it.

designerscode · 02-08-2010, 06:09 AM

Quote:

Originally Posted by mafia_man

Z-Index is the solution to what you are asking but it's not a good idea to watermark using CSS as people can still easily steal your photos.

Imagemagick is a tool you can use to watermark images on-the-fly either during upload or delivery.

This guy is right, you may be able to watermark but knowledgeable ones know how to steal from under your nose... and its spotless too haha

TheDA · 02-08-2010, 07:22 AM

Quote:

Originally Posted by designerscode

This guy is right, you may be able to watermark but knowledgeable ones know how to steal from under your nose... and its spotless too haha

You are also right but he's not watermarking to stop people from stealing his images

02-07-2010, 09:01 AM	#1
Oracle Porn Affiliate Industry Role: Join Date: Oct 2002 Location: Icq: 94-399-723 Posts: 24,433	CSS gurus inside please....watermarking with css im trying to watermark some thumbs Code: a img{ border: 1px solid #000000; width: 240px; height: 180px; background:transparent url(play.png) bottom right no-repeat; it works but the only problem is that my original thumb i want to watermark is OVER the play.png instead of UNDER it, anyone knows what i need to add? searching google for too long now thanks __________________

02-07-2010, 09:06 AM	#2
grumpy Too lazy to set a custom title Join Date: Jan 2002 Location: Holland Posts: 9,870	make your image the background, put the watermark over it as a thumb __________________ Don't let greediness blur your vision \| You gotta let some shit slide icq - 441-456-888

02-07-2010, 09:13 AM	#4
Va2k I’m still alive barley. Industry Role: Join Date: Oct 2001 Location: Va Posts: 10,060	Yea what grump said! __________________

02-07-2010, 09:15 AM	#5
quantum-x Confirmed User Join Date: Feb 2002 Location: ICQ: 251425 Fr/Au/Ca Posts: 6,863	<div style="background: url(yourimage.png) top left no-repeat;"><img src="watermark.png" /></div> __________________ PrettyInCash.com - BoozedGFs.com - TeenGFs.com - JizzGFs.com- MilfUploads.com -

02-07-2010, 09:17 AM	#6
SmellyNose Confirmed User Industry Role: Join Date: Aug 2009 Location: me at smellynose.com Posts: 206	Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway. Code: composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg Or, you could do something like this (untested): Code: for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

02-07-2010, 09:17 AM	#7
Oracle Porn Affiliate Industry Role: Join Date: Oct 2002 Location: Icq: 94-399-723 Posts: 24,433	shit that would be impossible no way around it? __________________

02-07-2010, 09:27 AM	#10
SmellyNose Confirmed User Industry Role: Join Date: Aug 2009 Location: me at smellynose.com Posts: 206	Ahhhh. If that's the case then the background-image being the actual thumb is best. Why can't you do that?

02-07-2010, 09:52 AM	#11
calmlikeabomb Confirmed User Join Date: May 2004 Location: SW Palm Bay, Florida Posts: 1,323	It's called using the z-index and it only works when elements have a set position type. Also, it's pointless and you should be using PHP or another language/software to create images with real water marks. __________________ subarus.

02-07-2010, 10:00 AM	#14
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	position: relative; z-index: 0; then for the overtop position: relative; z-index: 1; then just use margin to adjust it over top of the thumb. i suggest putting both inside a div.

02-07-2010, 10:03 AM	#15
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,372	unless you are trying to do a hover effect, then best way it just to watermark it automatically. here is an example of a play button on hover. http://cssglobe.com/post/1238/style-your-image-links __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

02-07-2010, 11:54 AM	#17
mafia_man Confirmed User Industry Role: Join Date: Jul 2005 Location: icq#: 639544261 Posts: 1,965	Z-Index is the solution to what you are asking but it's not a good idea to watermark using CSS as people can still easily steal your photos. Imagemagick is a tool you can use to watermark images on-the-fly either during upload or delivery.

02-07-2010, 12:08 PM	#18
Oracle Porn Affiliate Industry Role: Join Date: Oct 2002 Location: Icq: 94-399-723 Posts: 24,433	z-index didn't seem to work cuz i cant edit actual html. the java posted above works, i need to invert it somehow. __________________

02-07-2010, 12:19 PM	#19
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	no z-index does work you just have no idea to explain your problem. we dont speak jew here.

02-07-2010, 01:26 PM	#21
Mutt Too lazy to set a custom title Industry Role: Join Date: Sep 2002 Posts: 34,431	the problem with using the thumbnail as a background image is that it is unclickable no? i don't see the problem using CSS to add a watermark -look at all the TGP's that use CSS to add a little 'NEW' graphic on top of their thumbnails. __________________ I moved my sites to Vacares Hosting. I've saved money, my hair is thicker, lost some weight too! Thanks Sly!

02-07-2010, 02:59 PM	#24
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	not being able to edit the html sucks :/ why cant you edit it btw?

02-07-2010, 04:35 PM	#26
Oracle Porn Affiliate Industry Role: Join Date: Oct 2002 Location: Icq: 94-399-723 Posts: 24,433	thanks everyone for the help, i figured it out with the javascript fris posted __________________