how to created a curved background on top of image - html

Question

I have this design
How can I make the blue curved background on top of the image (I need the transparency as well) ?
I started it with a different backgournd but I don't know where to go from there. Any help will be really appreciated.
.bg {
background-image:url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
max-width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
}
.bluebg {
background-color: blue;
position: absolute;
}
<div class="bg">
<div class="bluebg">
</div>
</div>
https://jsfiddle.net/0rsLxtw5/7/

Answer 1

I hope the below-given snippet helps!
.bg {
background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
height: 200px;
background-size: cover;
background-position: center;
overflow: hidden;
}
.bluebg {
background: rgba(135, 206, 235, 0.5);
height: 140%;
width: 90%;
-webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
}
<div class="bg">
<div class="bluebg"></div>
</div>

Answer 2

I changed your HTML like the parent as child and child as parent.
.bg {
background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
max-width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
-webkit-clip-path: circle(50% at 98% 50%);
clip-path: circle(50% at 98% 50%);
}
.bluebg {
background-color: blue;
position: absolute;
height: 200px;
width: 100%;
}
<div class="bluebg">
<div class="bg">
</div>
</div>