© 2018, Divi Stream.

THIS IS BLENDING

Image Blending with CSS

by | Jul 31, 2018 | Tutorials | 0 comments

Since our last tutorial was so well received, we decided to create another tutorial on how to blend black and white images with another image. We have added an optional animation on the blended image for a nice effect.

 

In our previous tutorial we created a masked video background or image with the divi text module. We are going to use the same principles and simplicity because blending images is also done with the CSS property mix-blend-mode. In this tutorial we are going to blend these two, non-transparent, images into one.

image-blending-front-image
image-blending-back-image

We add a standard divi section with a text module, add an image to the section, add an image to the row and add some CSS for the blending and the animation.

1. Creating the basic layout

Add a standard section with a row set to one column and a text module.

Standard-layout

2. Modifying section settings

Add the image that you want to be the animated background image.

image-blending-section-settings

Note: You can download mine by clicking on the images above

Since our inner row contains the image layered above the animated background image, we need to set the padding to 0.

video-mask-section-settings-padding

3. Modifying the row settings

In the row settings under ‘general’ we change the row to a full width row and change the gutter width to 1. Then we add a top and bottom padding to our row so the text module does not end up in the top of the screen. Since the image is going to be full screen, we add a padding of 300px on both top and bottom. On tablet and smartphone size we use 150px.

image-blending-row-general-settigns

Under advanced settings we change the margin on all devices to 0 for top, right, bottom and left and we upload the background image, the one that is not animated, in the row.

image-blending-row-adv-design-settings

The custom CSS tab of the row settings is the place where the magic happens. In this tab we add the following CSS in the Main Element part:

mix-blend-mode: lighten;
background-size: cover;
background-position: center;
height:100vh;
z-index:2;

4. Customize text module (optional)

You do not need the text module for the result but it adds a text layer on top of the blended image. Style the text as you wish.

5. Adding the CSS Animation (optional)

To enable the animation we need to add a custom CSS class and some custom CSS. In the section settings we need to add ‘backAn’ as a CSS class.

image-blending-section-settings-css

This class must be defined in Divi settings -> Theme Options -> General in the custom CSS field. For the animation we use @keyframes. Using CSS keyframe animations, you can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. Learn more about keyframe animations. Add the following CSS Snippet to your custom CSS:

.backAn {
animation: backAn 200s infinite;
}
@keyframes backAn {
0% { background-position:0% 100%; }
50% { background-position:100% 100%; }
100% { background-position:0% 100%; }
}

Extra

Other than using this customization as a header, it is also possible to use this on a much smaller scale. This can also be done with the Divi image module. Example:

To achieve this, just simply add the section background image to the column background image in the advanced design settings of your row.

image-blending-row-adv-design-settings-2

Then you add the Divi image module to the column where you put the background image. Upload an image into the module, specify the max-width in the advanced design settings and add the following CSS code in the custom CSS tab under the main element:

mix-blend-mode: lighten;
background-size: cover;
background-position: center;
z-index:2;

Now you have created a smaller image with the same effect. Blending images has become much easier with the mix-blend-mode property and gives us developers, creators and designers many new possibilities to create new design. It is also very good to try the other property values like ‘Screen’, ‘Multiply’, ‘Overlay’ and ‘Darken’.

Resources

https://www.w3.org/TR/css3-animations/
https://codepen.io/riktar/pen/EyQZmb
https://css-tricks.com/almanac/properties/m/mix-blend-mode/
https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/

Free download

dus-webdesign-logo-sq
Rate this article!
Love
Haha
Wow
Sad
Angry