From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Blend mode image enhancement

Blend mode image enhancement

From the course: CSS: Images

Blend mode image enhancement

- [Instructor] When I said you could use CSS to do pretty much the same thing you can do in Photoshop, I was not kidding. Let me show you one trick that is often used in Photoshop to create soft focus images or changing the focus of an image, but I'm going to do it in pure CSS instead. So right now we have this image, this is the image right out of the box, I've done nothing to it. What I want to do here is apply a soft focus to it to soften a halo around the person's face and also change the appearance of the image. In the markup here, if I inspect it, you'll see I have an image element with just the image. And then what I've done is, behind the image, in the container, I've applied the same image as a background. Why would I do that? Well, this is a trick we use in Photoshop. You take an image, and then you take the same image and put it on top, and then you put a blend mode on that top image, and you blur it a…

Contents