From the course: CSS Shorts

Unlock this course with a free trial

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

Combine gradients and blend modes

Combine gradients and blend modes - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Combine gradients and blend modes

“

- [Chris] Hi, this is Chris Converse and in this episode, we'll add a special effect to a image, in order to highlight the area of a photo by combining a CSS gradient and a CSS blend mode. Now this technique that we'll be using will work on all modern browsers, with the exception of the Microsoft browsers, which includes Internet Explorer 11 and the Edge browser. 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. Now, inside of the HTML file, up in the head area, we have the link to style.css, we'll be opening this in a moment and if I scroll down in the HTML, I want to call your attention to the figure element here, so inside of the figure element, we have a figcaption and a div and the div has an image inside of it, so the reason that the image is inside of a div is because we're going to be adding our gradient to the background of this div element and then the image here is going to show up on top of that and…

Contents