cssmix-blend-modebackground-blend-mode

Animate Blend Mode with opacity and transition


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 ?

#img-esadvalence {
  background-image: url(http://leodurand.fr/works/planesad/esad1.jpg);
  background-color: #e12a1c;
  background-blend-mode: screen;
}

.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>


Solution

  • 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>