- [Instructor] Hi, this is Chris Converse
and in this episode, we'll use CSS to display
a full color image as grayscale,
and when we combine this with opacity settings,
we can create a duotone effect,
all with just a few CSS properties.
So if you'd like to follow along,
download the exercise files and let's begin
by opening the HTML file in a text editor.
And now in the HTML file, up in the head area,
we have a link to style.css
which we're going to be opening in a minute.
Inside of the main body area, we have a main element,
and inside of there is an article element.
Over in the browser, we can see this element
over here on the left.
This is actually a pseudo-element that's being treated
like a flex property.
And we actually covered this technique
in an earlier episode.
So what we're going to be doing is adding an image
into here using CSS and displaying that image as grayscale.
So let's go back to our exercise files.
Let's find style.css.
Let's open this in our text editor.
Let's scroll down.
In the CSS, we can see our main element here
which has a display type set to flex
which gives us our columns.
So what we're going to do is let's come down here
to the main element with the pseudo-element of before.
Down here we can see the background color,
and let's come in here and add some additional values
to this background property.
So after the color, let's hit a space.
Let's type in url, put in our parentheses.
Then we'll put images, forward slash,
background.jpg.
Outside of the parentheses, we're going to set the repeat
to no-repeat, and then for the position x and y,
we'll set both of these to zero.
Next property, let's set background-size,
and let's set this to cover.
With this in place, let's hit save.
We'll now see the full-color image
showing up on the left-hand side here in the preview.
So now let's come back here
and let's change this to grayscale.
So we'll add a filter property,
then a space, then we'll type in the word grayscale,
beginning and ending parentheses and a semicolon.
Inside of the parentheses, we're going to set this to 100%.
Hit save.
We'll now see that the image is now being displayed
as a 100% grayscale.
And now to give us that duotone effect,
let's come in here and set an opacity property,
and we're going to set this to .3, then a semicolon.
Save your CSS again, go back to the browser.
And now with that grayscale image being shown
at 30% transparency, over that darker background color,
which we set here, we're getting a nice duotone effect
for that full color image.
And so with that, I'll conclude this episode,
and as always, thanks for watching.