CSS Blend Modes - Product Image Color Selection with HTML and CSS
You will learn how to use mix blend mode in css to create a real world product color slider where you can select different colors of the product by clicking on the desired colour label.

The magical thing is that we are doing this completely in pure css and we don’t have to worry about writing javascript. To demonstrate how to use css blend mode, in this case mix-blend-mode to kind of blend two layers (namely a product image and a background layer created with html) together.
We are going to create a product image color selection page in HTML and CSS where we can select different color based on the colored labels using Pure CSS without writing a single line of javascript. This can be considered as the product image slider where we can showcase different product colors and provide the user to select the desired color of the product using the labels.

Time Stamps:
00:00 Intro - CSS Product Color Selection
00:35 Creating HTML Structure of the Product Slider
04:35 Applying the basic styling to the Product Slider with CSS
06:41 Styling lables with CSS to make them look like circular buttons
09:45 Different background colors for the label elements
14:28 Using CSS Mix-Blend-Mode to Blend Product Image with Product layer
15:06 Image Color Selection Based on Individual Colored Labels
16:36 Visual Feedback for Selected Label Color with CSS Transforms

Source Code : https://codepen.io/smashtheshell

Subscribe : https://www.youtube.com/channel/UCcPt0Jg_yRZcPSYwOPORE6g

#html #css