CSS Splash Image Masks – mix-blend-mode Property

In this trick, we’ll explore how to effortlessly create splash image masks with CSS using the mix-blend-mode: screen property.

The CSS mix-blend-mode property allows you to control how an element’s content blends with its background or the parent element’s content. Among the array of blending modes, the screen mode stands out for its ability to create smooth blends, perfect for splash image masks.

The screen blending mode serves to lighten the background color, resulting in a reflection of the blend color. This mode is particularly effective for seamlessly merging two images, offering a visually striking effect.

Let’s see the straightforward example to grasp the concept of splash image masks using mix-blend-mode: screen CSS property.

<div class="container">
  	<div class="image-mask"></div>
  	<img src="background-image.jpg" alt="Background Image">
</div>

.container {
  	position: relative;
  	width: 500px;
}

.image-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(mask-image.png); /* Path to your mask image */
  	background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
}

In the above example, the HTML structure consists of a container div containing both the image mask and the background image. The container is styled with CSS to position it relatively. The image mask div, positioned absolutely within the container, covers the entire area. By setting its background image and applying mix-blend-mode: screen, we blend it smoothly with the background image, creating an attractive splash effect.

Output

See the Pen Untitled by Aman Mehra (@amanmehra) on CodePen.

More Tricks

• How to Open, Read, and Write to File in Python?
• WordPress Sticky Header
• How to Install WordPress – Beginners Guide?
• Laravel 9 Image Upload Example Code Tutorial
• How to Get The First Image From a WordPress Post?

FAQs