0:00
Hi guys, today in this video I will show you how to add black and white filter on image
0:05
using CSS. In this folder I have one HTML file, one CSS file and one image
0:12
Let me open this folder with text editor which is brackets editor
0:16
So this is the HTML file I have written the basic HTML structures and this one is CSS file
0:23
I have added this link tag in the HTML file to connect the HTML file with CSS file
0:29
Now we will add code in the body tag. So here we will create one div with the class name container
0:35
And in this div I'll add one image. So I am using img tag then source and file name which is picture.jpg
0:43
Let me duplicate it. So here we have two images on this HTML file
0:50
Now open this HTML file with Google Chrome and you can see this image two times on this
0:56
web page and right now this image is so big. Let me come back and just copy this tag body and write it here in the CSS file
1:06
For this one we will change the background color. So here I'm adding background and this color code
1:13
So now you can see the black color in the background. Let's come back in the HTML file and copy this img
1:24
Write this img tag here in the CSS file and here we will add width
1:28
It will be 47% and we will add cursor pointer. Now you can see the image size has been reduced
1:39
Next we have to align these images in the center. So just come back and copy this class name container
1:46
Write this class name here in the CSS file and here we will add display
1:50
It will be flex and justify content space around align item center height 100vh and
1:57
width 90% margin auto. After adding this, you can see these images in the center
2:06
Next we have to add the black and white filter on this image. So just come back and copy this img here I'll write hover
2:14
So this filter will be visible when we will hover this image
2:19
So here I'm adding filter grayscale 100%. When it is 100%, it will look like a black and white image
2:30
You can see when I will take cursor over this image, it is black and white
2:34
If I move cursor over here, so the second one becomes black and white
2:40
Right now we have applied the grayscale filter on hover. Next what we will do, we will add this grayscale by default on this image
2:50
So just copy this one and add it here in this img tag
2:54
So by default, the image will be black and white and let me change it 0 in the hover
3:01
So by default, the image will be black and white and when we will take cursor over this
3:07
image, it will become colorful. You can see it is black and white and when I take cursor over any image, it becomes colorful
3:20
Right now the color is coming very fast. So we will add some transition time
3:24
So just come back in this CSS file and in this img tag, we will add transition 1 second
3:34
After adding this, you can see this image color is coming in 1 second
3:43
So this was very quick video about the grayscale filter in CSS
3:48
I hope this video will be helpful for you. Please like and share this video and also subscribe my channel Easy Tutorials to watch
3:54
more videos like this one. Thank you so much for watching this video
