Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to place image or video inside silhouette?
You might have come across websites in which you might have seen an image or a video being played in a silhouette. A silhouette can be an image, an object, person or an animal which is represented in black color and it makes the outline of the subject. We can insert any image or video in the silhouette so the video or the image is going to be shown in the color of the silhouette
In this article, we are going to have a look at how we can place an image or a video in silhouette.
How to place the object inside silhouette?
The silhouette is an image of an object or a person which is represented by a solid shape in black color or any other palette color. Now, the property that we are going to use here will be the mix-blend property and the property used specify how the content of the particular element will be blended with its nearest parent.
Syntax
Following is the syntax for using the mix-blend property −
mix-blend mode: =darken,multiply,normal;
The mix-blend mode has values like normal, multiply, screen, and darken and each of them change the blend relation with their nearest parent.. Let’s look at an example to understand this mix-blend property better.
Example
In the following example, we created three containers and then gave them three different classes. Then in the CSS section, we changed the width and height and the border-radius so that it gets the shape of a circle and then changed the color of all the circles. The code for the intended output is as follows −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the mix-blend property</title>
<style>
.round {
border-radius: 50%;
width: 79px;
mix-blend-mode: screen;
height: 79px;
position: absolute;
}
.round-one {
background: red;
}
.round-second {
left: 38px;
background: yellow;
}
.round-third {
left: 19px;
background: blue;
top: 39px;
}
.iso {
position: relative;
Isolation: isolate;
}
</style>
</head>
<body>
<div class="isolate">
<div class="round round-one"></div>
<div class="round round-two"></div>
<div class="round round-third"></div>
</div>
</body>
</html>
As you can see, with the use of mix-blend property we blended the circles above with 2 different colors.
Now, that we know how the mix-blend mode property works, we will be placing an image or a video in a silhouette and will make sure of having the required resources to do so. Let’s head over the code section to see how will we insert the image or the video in the silhouette.
Example
In this example, we will be adding an image in a silhouette image by using the mix-blend mode property.
In this, we first added a silhouette image and after that added the image that we are going to blend in with. Following that, we enclosed them under div and then gave them a class. After which went to the CSS section and then used the mix-blend mode property on the image that we have added and set the value to screen. Let’s look at the output that we will be getting by using the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the silhoutte property</title>
<style>
.con {
justify-content: center;
display: flex;
align-items: center;
}
body {
min-height: 99vh;
}
.con .main {
position: relative;
width: 399px;
margin: 48px;
height: 399px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.con .main img {
top: 0;
left: 0;
position: absolute;
width: 98%;
mix-blend-mode: screen;
height: 99%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<img src="https://www.tutorialspoint.com/static/images/banner-img.png?v=2.001" />
<img src="https://www.tutorialspoint.com/images/logo.png" />
</div>
</div>
</body>
</html>
You can see in the above output that we added the silhouette image and then added another image and when we used the mix-blend mode property the image blended with the silhouette in such a way that it looks like it is the same image and not 2 different images.
Note − We can use the mix-blend mode property with text, images, SVG and the browsers that support the mix-blend mode property are chrome, edge, safari, Firefox etc.
Conclusion
The silhouette effect can be used to make a website more interactive and attractive and it can be done by only using a single property in CSS which is the mix-blend property which defines how the content will be blended with content of its nearest parent and the background of the parent.
In this article, we saw how we can we place an image or a video in silhouette using a few CSS properties like the mix-blend mode property.
140 Views
