Manipulate Images Using CSS Filter and Blend Modes

[00:00] Let's start out by adding image selector. Inside of it, we'll type "filter." I'll add a sepia function. I'll provide it a value of, let's say, 80 percent. Filter functions are very powerful when you chain them together.

[00:16] Let's comment the sepia filter out and we'll set up another filter declaration. This time, I'll start with a contrast function and I'll give it a value of 175 percent. I'll add a space. Now, I'll include a saturate function. I'll give it a value of let's say 300 percent. Finally I'll add another space. I'll add a hue-rotate function. I'm going to give it 300 degrees.

[00:47] Next, let's look at background images. I'll comment this image out and I'll create a new div with the class of bear. We'll set up a selector to target the bear class. I'll set up a background image. I'll just use this source that I had before.

[01:03] I'll also add background color of, let's say, indigo. Need to add a few properties to get this div to show up. We can use the background blend mode property. I'm going to give it a value of exclusion.

[01:26] Blend modes can even be used with other elements such as text. Inside of the bear class, I'll add a paragraph tag with some text. I'll change the bear class to center that text. Now, I'll add a selector for the text inside of the bear class. I'm just going to add a few text properties to make that text a little bigger. I'll add a color to this text. I'm going to say color of coral.

[02:00] Now, I'll add another property called "mix blend mode." I'll give it a value of difference. Can also change this to something like "color dodge." Depending on what colors and what blend modes you choose, you can get some really, really cool combinations going.