CODEWITHSUNDEEP
cssmix-blend-mode
simohell
simohell

Reputation: 31

Mix blend mode with 2 overlapping divs but need to exclude the text

I'm flexing 2 elements, they overlap about 25%. Using mix-blend-mode, it blends the backgrounds nicely, but also the text.

JS fiddle right here: https://jsfiddle.net/simohell/q9breg60/

I tried using ::before to apply the mix-blend mode but i can't figure it out.

.wrapper {
  display: flex;
}

.text {
  margin-top: 30px;
  flex: 0 0 50%;
  padding: 30px;
  background-color: rgba(17, 38, 59, .95);
  mix-blend-mode: multiply;
}

h1,
p {
  color: #fff;
}

.image {
  flex: 0 0 75%;
  margin-left: -25%;
  background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
  background-size: cover;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
  <div class="image">&nbsp;</div>
</div>

Upvotes: 3

Views: 703

Answers (1)

Temani Afif
Temani Afif

Reputation: 273904

Move the background of the text to main wrapper instead then increase its z-index to allow the image to blend only with the background. The main trick is to adjust the size of the gradient to simulate the same background for the text only:

.wrapper {
  display: flex;
  background:
    linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95)) 
    bottom left/ 
    50% /*widh:50% */
    calc(100% - 30px) /*height:100% - top margin */
    no-repeat;
}

.text {
  margin-top: 30px;
  flex: 0 0 50%;
  padding: 30px;
  z-index:2;
}

h1,p {
  color: #fff;
}

.image {
  flex: 0 0 75%;
  margin-left: -25%;
  background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
  background-size: cover;
  mix-blend-mode: multiply;
}

body {
 margin:0;
}

* {
  box-sizing:border-box;
}
<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
  <div class="image">&nbsp;</div>
</div>

You can also move the image to the background of the main wrapper and consider background-blend-mode. You will also have a reduced code:

.wrapper {
  overflow:auto;
  background:
  url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80") 
    center/cover content-box,  
  linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95)) 
    bottom left/ 
    50% /*widh:50% */
    calc(100% - 30px) /*height:100% - top margin */
    no-repeat;
  padding-left:25%;
  background-blend-mode: multiply;
}
.text {
  margin-top: 30px;
  width:66.6%; /* we added 25% of padding so we need 66.6% from 75% to get 50%*/
  margin-left:-33.4%; /* we shift back by the added margin 25% (33.4% of 75%)*/
  padding: 30px;
}
h1,p {
  color: #fff;
}

body {
 margin:0;
}

* {
  box-sizing:border-box;
}
<div class="wrapper">
  <div class="text">
    <h1>Welcome to this snippet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
  </div>
</div>

Upvotes: 1

Related Questions