-2

i have come close to what i am trying to make happen. i want to apply the blend mode to only be happening when the text and images overlap. Right now it is doing exactly what i want. However, i want the images to remain with no effect and just have the text and images blend.` 

    <div id="fullpage">
    <div class="section" id="one">
        <p class="name">Tyler Owens</p> <p class="info">Graphic Design</p> 
    </div>

    <div class="section" id="two">
        <div class="scrollable-content">
            <div class="header">
            <p class="name1">Tyler Owens</p> 
            <p class="information">Information</p> 
            <p class="work" >Non-Work</p> 
            <p class="work1" >Work</p> 
            </div>
            <div class=grid2>
            <img class="artekbook1" src="img/artek_book.png" alt=""> 
            <img class="programbook1" src="img/programbook2.png" alt="">
            <img class="postershow" src="img/postershow.png" alt="">
            </div>
            </div>
        </div>
    </div>

currently i am calling mix-blend-mode:difference; on grid2

screengrab of result

thank you for any help

Tyler Owens
  • 21
  • 1

1 Answers1

0

Blending mode blends the current layer with the layers below it.
In your case the blending mode you have set blends the image with white background of the page so the image becomes negative.

Try applying the blend mode to the .header instead of .grid2 to blend your inscriptions with the image below them.

kade99
  • 37
  • 6