Hey dear friends, In this blog you will know about a very useful property of CSS that is "Background-Blend-Mode" and guys with the help of this css property use can mix two different images into one as looks to combine as amazing one. You can also apply to different predefined more values like 'screen', 'multiply', 'darken' etc. to look different effects by putting inside the "background-blend-mode: 'Enter Value Name'" of CSS property.

For Example - See screenshot that given below.

Watch Tutorial of Double Exposure Effect using "Background-Blend-Mode"

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>Double Exposure Effect using "Background-Blend-Mode" Property in CSS</title>
  </head>
  <body>
      <section></section>
  </body>
  </html>

CSS CODE:

      *{
	margin: 0;
	padding: 0;
}
section{
	height: 100vh;
	width: 100%;
	background: url(city.jpg),url(image2.jpg);
	background-position: center;
	background-size: cover;
	background-blend-mode: screen;
}

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files. [Source code includes images also]

Double Exposure Effect using "Background-Blend-Mode" Property in CSS

For Example - See screenshot that given below.

Watch Tutorial of Double Exposure Effect using "Background-Blend-Mode"

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding

How To Create Like And Dislike Rating Page Using Html, CSS And JavaScript