create a circle image with text - html

Question

I want to create a circle image with text like a picture, i upload in below
But i create a circle image with text like this show in after correct image
.circles {
margin: auto;
height: 73px;
width: 130px;
border: 2px solid black;
display: flex;
justify-content: center;
overflow: hidden;
background-color: black;
opacity: 50%;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
margin-top: -169px;
}
.tit {
color: white
}
<div className="circle">
<img src={imageupload} className="cirimage" />
</div>
<div className="circles">
<p className="tit">Title</p>
</div>

Answer 1

.round {
background: #fff;
border: 2px solid #000;
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
}
.text {
background-color: black;
opacity: 50%;
color: #fff;
padding: 10px;
text-align: center;
z-index: 999;
position: relative;
}
.image {
background-color: #e6baba;
height: 100px;
width: 100px;
position: relative;
top: -38px;
z-index: 9;
}
<div class="round">
<div class="text">
Text
</div>
<div class="image">
Add Image Here
</div>
</div>

Answer 2

update your CSS file
.text-container {
background-color: black;
opacity: 50%;
padding: 10px;
text-align: center;
z-index: 999;
color: #fff;
position: relative;
}
.image-container {
background-color: #e6baba;
height: 100px;
width: 100px;
z-index: 9;
position: relative;
top: -38px;
}
.circle-container {
background: #fff;
border: 2px solid #000;
height: 100px;
width: 100px;
overflow: hidden;
border-radius: 50px;
}
Use HTML as below
<div class="circle-container">
<div class="image-container">
Add Image Here
</div>
<div class="text-container">
Text
</div>
</div>