Append Subtitle/Caption Image Using PHP and Hide It with CSS

Note: People say it isn’t actually a watermark, the image appended can be called a “Caption” or “Hidden Subtitle”. So in this post, when I say “watermark”, it refers to the ”Caption” or “Hidden Subtitle”.
Nowadays I see many websites with image contents. Funny images, interesting images, cosplay, art and many more kinds of images. Many people don’t want to hotlink or copy the image link and share it to any social networking site such as Facebook, instead they copy or download the image (using browser’s “Save image as” option) and upload it to their own account without linking it to the source or website where they found it.

One solution websites do is to append a watermark on their images. The don’t want this watermark to be shown on their website but they want it to appear when the user went to the actual image link or when this image was copied or downloaded.
An example website the does this is When you see the image on their site, it does not have any watermark. But when you try to save the image, the watermark will appear, appended at the bottom part of the image, it is in white background.
Today we’re going to do a code the does something like that.

  • Append a watermark at the bottom part of the image using PHP
  • Hide it using CSS

First, we need to prepare:

  • Sample image – the image you want to put a watermark
  • Watermark image – the image that will be put as watermark on the sample image

As for the sample image, we’re going to use this image of my pets (yes, my pets):

Append Subtitle/Caption Image Using PHP and Hide It with CSS

For the watermark image:

This will be appended on the main image
This will be appended on the main image

Some notes:

    • “sample.jpg” and “watermark.jpg” should be your variable
    • PHP GD library should be enabled on your server

Our index.php, we are going to have the following code:

    //set the header
    header( "Content-type: image/jpg" );
    //get image sizes first
    $image_size = getimagesize( "sample.jpg" );
    $watermark_size = getimagesize( "watermark.jpg" );
    $image_size_width = $image_size[0];
    $image_size_height = $image_size[1];
    $watermark_size_width = $watermark_size[0];
    $watermark_size_height = $watermark_size[1];
    //create images
    $main_img = imagecreatefromjpeg( "sample.jpg" );
    $watermark = imagecreatefromjpeg( "watermark.jpg" );
    //create canvas
    $canvas = imagecreatetruecolor(
        $image_size_width, //width of main image
        $image_size_height + $watermark_size_height //this is the new height, height of main image plus watermark image
    ) or die('Cannot Initialize new GD image stream.');
    //set white background of canvas
    $bg = imagecolorallocate( $canvas, 255, 255, 255 );
    imagefill ( $canvas, 0, 0, $bg );
    //paste main image to the canvas
        0, //main_img x coordinate ( distance from left side of main_img )
        0, //main_img y coordinate ( distance form top of main_img )
        0, //main_img x coordinate image ( distance from left side of main_img )
        0, //main_img y coordinate image ( distance from top side of main_img )
        $image_size_width, //main_img width
        $image_size_height, //main_img height
        100 //the opacity of main_img
    //paste the watermark image to the canvas
        0, //watermark x coordinate ( distance from left side of main_img )
        $image_size_height, //watermark y coordinate ( distance form top of main_img )
        0, //watermark x coordinate image ( distance from left side of watermark )
        0, //watermark y coordinate image ( distance from top side of watermark ) 
        $watermark_size_width, //watermark width
        $watermark_size_height, //watermark height
        100 //the opacity of watermark
    //show the new image
    imagejpeg( $canvas );
    //if you want to save it to your server directory, just add the second param
    //something like:
    //imagejpeg($canvas, 'your_directory/new_img.jpg');
    imagedestroy( $canvas );
    imagedestroy( $main_img );
    imagedestroy( $watermark );

Now, we are going to the second part of this post. We are going to show the output image on a webpage, but the watermark is hidden using CSS.

Our page.php should have the following code:

    <div style='font-weight:bold; font-size:18px;'>The image below has a watermark, but it was hidden.</div>
    <div style='margin:5px 0;'>Try to go to the actual image by doing 'open image in new tab' or downloading it.</div>
    <div style='overflow:hidden;'>
        <!-- -30px here is the height of our watermark -->
        <img src='new_img.jpg' style='margin:0 0 -30px 0;' />

See the live demo for the output! :)

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]


  1. Good article but for me that isn’t à watermark. I know what Google says about watermark, but here if à visitor stills thé pic, hé has just to cut thé bottom to use it as is own… No ?

  2. Thanks for sharing. But if you’re trying to stop people from thieving your images, you can just use JS to create a overlapping element (with higher z-index) in from of the picture w/ opaque watermark.

    1. You won’t stop people doing that way. If you “overlap” an element in front of the image, I guess that the “plain image” is downloaded to the client in any way. If so, then the user can get the plain image in a lot of different & easy ways: remove the overlapping element (via Javascript or Firebug/Chrome Dev Tools), or inspect the page & search for requested images to the server (Firebug/Chrome Dev Tools anyone?).
      In any way, if a resource is downloaded to the client, the client can save it, unless you use some crypt algorithm and that algorithm is not available to the client (to be exact, it can also be bypassed, but it’s not as simple as this).

    1. Thanks for your comment, but in this picture, it says it’s a watermark. And google defined watermark as “Mark with such a design.” so we consider it a watermark. Would you tell me what was that called if that’s not a watermark? So I can update that post. Thanks again!

    2. I’d have to agree that this isn’t a watermark. It’s a caption. Generally, watermarks as used online are something that obscures or partially distorts a portion of an image. This is seen as a method of preventing copyright abuse (see sites like iStockPhoto for examples) or a way of identifying the source of an image (such as a logo overlaid on part of the image).

      The idea of a watermark is that you can’t crop or otherwise remove the watermark without removing parts of the image. Your example doesn’t do this.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top