Image with half blend mode set up

Question

I would like to add to my image a layer with colour and set blend mode, for example multiply to 50% of all image width. Like that:

I know how to create that to full image, by how to create on 50% of image width?

Here is example on full image

[https://codepen.io/Matteokr/pen/PyJwKB][2]

Answer 1

One way to achieve that is to use background-blend-mode like this:

*{box-sizing:border-box;padding:0; margin:0}
.wrapper{
    position: relative;
    width: 480px;
    height:320px;
    margin: 64px auto;   
    background-image: url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.image{
    position:absolute;
    left: 0;
    top: 0;
    width: 480px;
    height:320px;
    background-blend-mode: color;
    background-color: #ffff006e;
    background-image: linear-gradient(yellow, #d3e600), url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.wrapper,
.image{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
 
.layer{
  position: relative;
  width: 65%; /*change the percentage here*/
  height:100%;
  overflow: hidden
}

<div class="wrapper">
  <div class="layer">
    <div class="image"></div>
  <div>
</div>