How to Apply a Mask Effect to a JPG Image Using CSS and Transparent PNG Images

Using masks with different shapes and designs to change the appearance of images displayed on the web is a great way to meet the requirements of creative designs or specific artworks. This article details how to mask display a JPG image using CSS and a transparent PNG image.

Why Masking is Important?

Masking broadens the range of design possibilities and provides users with an impressive visual experience. By highlighting only specific parts or adding animation effects, you can enhance the engagement of your site.

Preparing the Necessary Images

Transparent PNG Image

JPG Image to be Masked

Using these images, we will apply the PNG mask over the JPG image.

Writing the CSS for Masking

The following CSS is for displaying the JPG image with a mask. Here, we prepare the #photo area and layer the .photo-mask area (setting the PNG image as the background) on top of it.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0 15px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:750px;
	margin:0 auto;
}
#photo {
	position: relative;
	display: block;
	width: 152px;
	height: 152px;
	margin:0 auto;
}
#photo .photo-mask{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 152px;
	height: 152px;
	background:url(mask.png);
}
-->  
</style>

Writing the HTML

The following HTML applies the above CSS to display the masked JPG image. Here, we place the img image in the id=”photo” area and layer the class=”photo-mask” area (setting the PNG image as the background) on top of it.

<div id="idWrap">
<div id="idContents">

	<h1>Display the JPG Image with a Mask Using a PNG Image on the Upper Layer</h1>
    <div id="photo">
        <span class="photo-mask"></span>
        <img src="i01.jpg" alt="" width="152" height="152" />
    </div><!--/photo-->

</div><!--/idContents-->

</div><!--/idWrap-->

Demo Page for Masking a JPG Image with CSS and a PNG Image

You can check the actual mask display demo from the link below.

CSS and PNG Image Masking Demo

Other Applications

Using only the masked images is fine, but various applications can be considered, such as adding animation effects by dynamically moving the position of the JPG image under the layer with JavaScript. Mastering this technique can greatly expand the range of design possibilities for your website or app.

Conclusion

Masking images is a powerful tool to customize visuals according to design and messaging needs. Refer to this article to enjoy creative mask displays in your projects.

　
Please use this at your own risk. Do not reuse the Google Analytics tags in the demo page tags.