CSS Effects – Image blending effects using CSS

Creative CSS Effects | April 25, 2022

Today in this blog you’ll learn how to create Image blending effects using CSS.

Video tutorial of Image blending effects using CSS

This tutorial video can help you to create Image blending effects using CSS

Image blending effects using CSS [Source Codes]

This source code can help you to create Image blending effects using CSS.

Image source pixabay

Second image source unsplash

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="y-box">
	<div class="x-box">
		<img src="images/pic1.png">
	</div>
	<div class="x-box">
		<div class="pattern" style="background-image: url(images/pattren.jpg);"></div>
		<img src="images/pic1.png">
	</div>
</div>
	
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	color: #fff;

  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.y-box{
	display: flex;
	justify-content: space-around;
	width: 90%
}
.x-box{
	width: 40%;
	position: relative;
}
.x-box img{
	width: 100%;
}
.pattern{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
}
.pattern + img{
	mix-blend-mode: overlay; /*color-dodge difference*/
}