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
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.