How to place image or video inside Silhouette ?

Last Updated : 25 Jul, 2021

In this article, we will learn how to place an image or video inside a silhouette using CSS. Before that, let’s have a brief definition of a silhouette. It is basically an image of any person, animal or it could be any object which is represented by a solid palette of color. In general, it is in black color. Basically, what we are going to do in this article, we will place or insert any desired image or video and then we will achieve an effect so that our image will be shown in only the solid color of Silhouette. We can do this very easily with a simple CSS property that is called mix-blend-mode.

In order to place any image or video inside the silhouette, make sure that we have the required image and video files & the silhouette where we will place them. Let’s begin with a step-by-step process.

Example: Create an HTML file and add the following line of code.

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"/> 
  
    <title>Image inside the Silhouette</title> 
  
    <style> 
      * { 
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
      } 
      body { 
        min-height: 100vh; 
      } 
      .container { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
      } 
      .container .main { 
        position: relative; 
        width: 400px; 
        height: 400px; 
        margin: 50px; 
      } 
      .container .main img { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        mix-blend-mode: screen; 
      } 
    </style> 
  </head> 
  
  <body> 
    <div class="container"> 
      <div class="main"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210723124629/gfg-200x200.png"/> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210723162735/pattern1-300x295.png"/> 
      </div> 
    </div> 
  </body> 
</html>

Output: In this case, we can see that the fancy shape is used as a silhouette image. So, this is how we can add images to a silhouette. Now, for adding video or gif, we don’t need to do any extra work, we only have to add some more HTML and CSS to the existing file.