Canva Duotone Effect

Question

I've looked around for this question but cant seem to find a response.

I am attempting to replicate a duotone image i created on canva, but through CSS. I have attached two images, the first image is the one I created on canva, the second is the closest I can get to it through CSS. If anyone has any advice it would be much appreciated.

duotone canva 1

duotone canva 2

.color-hover-wrapper {
    block-size: 186.562px;
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    bottom: 0px;
    box-sizing: border-box;
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    height: 186.562px;
    inline-size: 270.75px;
    inset-block-end: 0px;
    inset-block-start: 0px;
    inset-inline-end: 0px;
    inset-inline-start: 0px;
    justify-content: center;
    left: 0px;
    margin-block-end: 10px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    object-fit: cover;
    perspective-origin: 135.375px 93.2812px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    transform-origin: 135.375px 93.2812px;
    width: 270.75px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    margin: 0px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}

.color-hover-wrapper:after {
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

.color-hover-wrapper:before {
    block-size: 186.562px;
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    bottom: 0px;
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    content: '""';
    display: block;
    height: 186.562px;
    inline-size: 270.75px;
    inset-block-end: 0px;
    inset-block-start: 0px;
    inset-inline-end: 0px;
    inset-inline-start: 0px;
    left: 0px;
    mix-blend-mode: lighten;
    perspective-origin: 135.375px 93.2812px;
    position: absolute;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    transform-origin: 135.375px 93.2812px;
    width: 270.75px;
    z-index: 1;
    background: rgb(86, 179, 148) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

.image-74 {
    block-size: 186.562px;
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    bottom: 0px;
    box-sizing: border-box;
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    display: block;
    filter: brightness(1.3) grayscale(1);
    height: 186.562px;
    inline-size: 270.75px;
    inset-block-end: 0px;
    inset-block-start: 0px;
    inset-inline-end: 0px;
    inset-inline-start: 0px;
    left: 0px;
    mix-blend-mode: multiply;
    object-fit: cover;
    perspective-origin: 135.375px 93.2812px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    transform-origin: 135.375px 93.2812px;
    vertical-align: middle;
    width: 270.75px;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

.image-74:after {
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}/*#IMG_2:after*/

.image-74:before {
    border-block-end-color: rgb(51, 51, 51);
    border-block-start-color: rgb(51, 51, 51);
    border-inline-end-color: rgb(51, 51, 51);
    border-inline-start-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    border: 0px none rgb(51, 51, 51);
    font: 14px / 20px "Archia webfont", sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}

<div class="partner-images-middle color-hover-wrapper">
    <img src="https://uploads-ssl.webflow.com/614dcb4bf12577162ad79f80/61e7e02d6695217fc1c8e82d_Screenshot%202022-01-19%20at%2010.55.37.png" loading="lazy"   sizes="(max-width: 1279px) 28vw, 342px" class="image-74">
</div>

Answer 1

I got rather confused with all the CSS as most of it didn't seem to be related to trying to get the monotone image so here is a snippet with everything stripped away apart from setting grayscale, upping the contrast slightly and mix blend mode. Obviously you will want to play with those to get exactly the required effect.

.color-hover-wrapper {
  width: 50vw;
  background-color: rgb(86, 179, 148);
  display: inline-block;
}

.image-74 {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(1) contrast(1.5);
  filter: grayscale(1) contrast(1.5);
  width: 50%;
  rheight: auto;
  width: 100%;
}

<div class="partner-images-middle color-hover-wrapper">
  <img src="https://uploads-ssl.webflow.com/614dcb4bf12577162ad79f80/61e7e02d6695217fc1c8e82d_Screenshot%202022-01-19%20at%2010.55.37.png" loading="lazy" sizes="(max-width: 1279px) 28vw, 342px" class="image-74">
</div>

Note: I didn't dig into what the before and after pseudo elements were to do, but they were not being applied to the img at least in my current browser (Edge) and on the whole you can't put pseudo elements on replaced elements. It might be good to inspect exactly what CSS is being applied using your browser dev tools.