CODEWITHSUNDEEP
csseffectsmix-blend-mode
Guillermo Carone
Guillermo Carone

Reputation: 838

mix-blend-mode: difference not working with fixed elements and background images

I’m trying to implement two overlapping element with a blend effect between them like in the image below, however the mix-blend-mode property doesn’t seem to be working and I cant figure out why.

This is the HTML structure I have:

<div class="cont_work">
    <a class="marco_img img_cover" style="background-image: url("http://bloomint.montenegrostudio.com/wp-content/uploads/2018/07/Untitled-1-1024x684.jpg"); opacity: 1;" href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">
    </a>
    <h2 class="tit_project" style="display: none;">
        <a href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">PRIVATE HOME CHEZ MICHELLE</a>
    </h2>
    <a class="marco_img img_cover" style="background-image: url("http://bloomint.montenegrostudio.com/wp-content/uploads/2018/07/Untitled-1-1024x684.jp"); opacity: 1;" href="http://bloomint.montenegrostudio.com/portfolio/proyecto-2/">
    </a>
    <h2 class="tit_project">
        <a href="http://bloomint.montenegrostudio.com/portfolio/proyecto-2/">ICFF STAND NYC</a>
    </h2>
</div>

And this is the CSS I’m using:

.cont_work{
    .marco_img{
        position: relative;
        float: left;
        opacity: 1;
        filter: alpha(opacity=1);
        -webkit-transition: all 2s ease; /* Safari */
        transition: all .8s ease;
        &.hover {
            +.tit_project{
                display: block;
            }
        }
    }
    .tit_project{
        text-align: center;
        display: none;
        mix-blend-mode: color-burn;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        pointer-events: none;
        text-align: center;
        a{
            color:@black;
        }
    }
}

This is what I'm looking to achieve

enter image description here

And this is what I get with the code above:

enter image description here

You can see the real live scenario here: http://bloomint.montenegrostudio.com/work

Upvotes: 1

Views: 5809

Answers (1)

Guillermo Carone
Guillermo Carone

Reputation: 838

In case anyone finds themselves with the same issue I figured it out. The h2 element which has the mix-blend-mode (in my particular case) needed to be inside the a which had the image background.

Like this:

<div class="cont_work">
    <a class="marco_img img_cover" style="background-image: url("http://bloomint.montenegrostudio.com/wp-content/uploads/2018/07/Untitled-1-1024x684.jpg"); opacity: 1;" href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">
        <h2 class="tit_project" style="display: none;">
            <a href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">PRIVATE HOME CHEZ MICHELLE</a>
        </h2>
    </a>
</div>

Upvotes: 5

Related Questions