This is what happens when the site is drawn by designers not from the web:
The lower part is not created through transparency, but by the multiplication method. Can SVG help in this case? Because I get something dark or faded, because the transparency of such an effect of highlighting dark areas will not work:
.item { width: 800px; margin: 50px auto; display: flex; align-content: center; align-self: center; } .item .img { width: 50%; font-size: 0; position: relative; } .item .img img { width: 100%; height: auto; } .item .test { width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; filter: grayscale(1); } .item .content { width: 50%; position: relative; display: flex; flex-direction: column; } .item .content .up { width: 100%; } .item .content .down { width: 100%; padding: 10px; background-color: #4f7bbf; background-position: -1000px bottom; background-repeat: no-repeat; color: #fff; box-sizing: border-box; position: absolute; bottom: 0; left: 0; } .item .content .down::before { content: ""; width: 100%; height: 100%; background: rgba(46, 85, 153, 0.7); display: inline-block; position: absolute; bottom: 0; left: -100%; z-index: 2; } .item .content .down::after { content: ""; width: 100%; height: 100%; background-image: inherit; background-position: left bottom; background-size: cover; filter: grayscale(1); position: absolute; bottom: 0; left: -100%; z-index: 1; } <div class="item"> <div class="img"> <img src="https://i.stack.imgur.com/3kF9S.jpg" alt="" /> </div> <div class="content"> <div class="up">text text text</div> <div class="down" style="background-image:url('https://i.stack.imgur.com/3kF9S.jpg');"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> </div> Actually the question is: can this be done with the help of CSS, SVG, and dances with a tambourine?
