Animate Blend Mode with opacity and transition

css mix-blend-mode background-blend-mode
Léo Durand picture Léo Durand · Aug 4, 2017 · Viewed 10.8k times · Source

I'm looking for a way to change the opacity of background-color-blend-mode like Photoshop. My goal is to animate the opacity of the blend-mode to make it disappear. Any ideas ?

Answer

Ori Drori picture Ori Drori · Aug 4, 2017

The blend mode only works when there are 2 backgrounds. To cancel the blend mode gradually, you can animate (transition) to a transparent background color.

Demo (hover the image to see the effect):

#img-esadvalence {
  background-image: url(https://placeimg.com/640/480/animals);
  background-color: #e12a1c;
  background-blend-mode: screen;
  transition: background-color 1s;
}


#img-esadvalence:hover {
  background-color: transparent;
}

.all-img-menu {
    background-size: contain;
    background-position: center; 
    width: 110%;
    padding-bottom: 40.75vh;
    display: block;
    top: 50%;
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%); 
    transform: translate(0%,-50%);
    position: absolute;
    transition: all 0.6s ease;
}
<div id="img-esadvalence" class="all-img-menu"></div>

Related questions

Multiply mode in CSS?

In Photoshop if you import a JPG image with a white background into a document with a blue background, you can make the white background of the image disappear by setting the image to "multiply" mode. Can I do exactly …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More