Tutorial – PNG mask layer

stable yard with teacher
PNG mask layer image

The PNG mask layer over a landscape image

peter gabriel album cover
PNG mask layer image

The same PNG mask layer over a square image which auto resizes to the image size it sits on

The Result

The above is the effect that we are going to create using a transparent PNG image, as a mask over an image, and CSS stacked layers. The advantage of using the png image as a layer is that whatever size image you use, the mask layer border will auto resize to the image that it is overlaying.

The Method

The process uses only 2 divs. One contains the image and the other contains the PNG mask image which will be placed over top of the first image using a stacked css layer created with Z-index.

How to…

First, create a div container and place your image inside of it and give it the class name “png-mask-container” like below. This container is going to be the ‘parent’.

<div class="png-mask-container">
      <img src="your_image.jpg" alt="your image description">
</div>

Then, create a second div container which will be inside the first ‘parent’ div. This is going to be the png mask layer so put the PNG image file inside of it also. Give this container the css class name of “png-mask-image”.

<div class="png-mask-container">
    <img src="your_image.jpg" alt="your image description">
        <div class="png-mask-image">
             <img src="the_png_mask_image.png" alt="png mask layer">
        </div>
</div>

At this point both of the images are sitting on the same layer so your image will be positioned on top of the png image file in the page flow. This is where the css styling will do it’s thing.

The container  for the images has to be set to relative (position: relative) in order for the png image to layer on top of it. And the z-index can be set to 1 (z-index: 1) which will stack it one level up from the main page which by default is set to zero a.k.a the Block Level.

<style>
.png-mask-container {
    position: relative;
    z-index: 1;
}
</style>

Next thing to do is set both images (your image and the PNG mask layer image) to display 100% width (width: 100%). We can do this by adding the styles shown below in blue. Adding the line display: block will eliminate the small bit of white space that can show underneath an image when placed inside a <div>. Setting the height to auto (height: auto) isn’t really required but it won’t harm to have it there.

<style>
.png-mask-container {
    position: relative;
    z-index: 1;
}
.png-mask-container img {
     display: block;
     width: 100%;
     height: auto;
}
</style>

Now the magic happens! 😉

Now we will set the PNG mask image to a layer that will sit on top of the image. This is set to absolute (position: absolute) which means it will use the edge parameters of the layer underneath i.e, the png-mask-container div. The z-index is set to 2 (z-index: 2) to stack it on top of layer 1 (z-index: 1) and the png mask image is positioned to start at the top (top: 0) and to left (left: 0).

The last and important thing to do is set the height to 100% (height: 100%). This will force the mask layer to equal the image height that it sits on.

<style>
.png-mask-container {
    position: relative;
    z-index: 1;
}
.png-mask-container img {
     display: block;
     width: 100%;
}
.png-mask-image img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
}
</style>

And that’s it. Now, any size image that you load into the container will automatically resize the mask layer on top.

The complete HTML & CSS code

<style>
.png-mask-container {
    position: relative;
    z-index: 1;
}
.png-mask-container img {
     display: block;
     width: 100%;
}
.png-mask-image img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
}
</style>

<div class="png-mask-container">
    <img src="your_image.jpg" alt="your image description">
        <div class="png-mask-image">
             <img src="the_png_mask_image.png" alt="png mask layer">
        </div>
</div>