CSS: adding an image to a circle with text - css

Question

I would like to add an image to a circle that is created by CSS and has text inside. I know how to create a circle with text, for example, this StackOverflow question and answer shows how to do it. Here is the circle definition in css:
circle {
background: #f00;
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 100px;
margin-right:5px;
}
and here is what I will have in html:
<circle>THIS IS THE TEXT</circle>
Now I want to be able to add a background image to the circle and if possible add an opacity of 0.5. So basically I want an image with a shape of circle and text on top of it. Here is an example:
The "THIS IS THE TEXT" is the text that can be written in the html code on top of the image.
How can this be done?

Answer 1

It's not hard to find how to do a circle with text. The <circle> is used for SVG, so it's not what you want here. Use a plain <div> instead. The solution here gives the background image a opacity.
body {
background-color: #121212;
}
.circle {
position: relative;
height: 300px;
width: 300px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.circle:hover:after {
opacity: 0.5;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(https://buyersguide.caranddriver.com/media/assets/submodel/280_8204.jpg);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 1;
transition: opacity 300ms;
}
.circle__text {
padding: 10px;
background-color: yellow;
}
<div class="circle">
<span class="circle__text">random text</span>
</div>

Answer 2

if you want an alternate solution here is what i use
.story_shape {
width: 15rem;
height: 15rem;
-webkit-shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
position: relative;
}
.story_img {
height: 100%;
transform: translateX(-4rem);
backface-visibility: hidden;
}
.story_caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-transform: uppercase;
font-size: 1.7rem;
text-align: center;
backface-visibility: hidden;
}
<figure class="story_shape">
<img src="https://orig00.deviantart.net/6afd/f/2015/182/4/f/croatia_nature_pack___sample__1___proref_org_by_proref-d8zgqmh.jpg" alt="person on a tour" class="story_img">
<figcaption class="story_caption">mary smith</figcaption>
</figure>