WebDev Tips . Cool image effects with two lines of CSS

Cool image effects with two lines of CSS

#263

HTML - CSS

February 10, 2021

alt text

How are you doing today guys? 🤗🤗

For today's tip I want to show you how we can use the CSS property 'mix-blend-mode' to create some mesmerizing image effects!
To start, we just need some divs with some background images. We'll create an 'after' pseudo element on these divs to fill the whole div.

<div class="flex">
  <div class="img first"></div>
  <div class="img second"></div>
  <div class="img third"></div>
</div>

<div class="flex">
  <div class="img fourth"></div>
  <div class="img fifth"></div>
  <div class="img sixth"></div>
</div>

Now, we just need two CSS properties on each 'after' to create these effects: 'background' and 'mix-blend-mode'. So by adding a color and changing the way this color will blend with the background image, different effects can be created.

.img {
  position: relative;
  width: 22rem;
  height: 15rem;
  margin: 1rem;
  background: url('./1.jpg') center;
  background-size: cover;
  border-radius: 4px;
}

.img:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 4px;
}

.second:after {
  background: black;
  mix-blend-mode: soft-light;
}

.third:after {
  background: black;
  mix-blend-mode: color;
}

.fourth:after {
  mix-blend-mode: overlay;
  background: #681fd8;
}

.fifth:after {
  background: #20e8ff;
  mix-blend-mode: hue;
}

.sixth:after {
  background: #eae756;
  mix-blend-mode: saturation;
}

Just play with these two values and you can create a huge variety of 'filters' on each image. It's that simple!
Make sure you try it and let me know your thoughts on this tip 😊👇