<div class="row">
<div class="col s12 l4">
<div class="card">
<div class="card-image" style="position:relative; overflow:hidden;height: 300px;width: 418px;">
<img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;">
<div style="content:'';
position: absolute;
left: 309px;
top: 206px;
z-index: 1;
border-radius: 100%;
width: 160px;
height: 160px;
background: rgba(0,0,0,.5);">
</div>
</div>
</div>
</div>
It seems like the current setup might not be exactly what you are looking for. One key aspect is to ensure that the card-image is positioned relatively, which allows it to act as a reference point instead of the window. Additionally, applying overflow to it helps to hide any content within it.
I'm unable to view your image properly, so I may not fully grasp your requirements.
A possible suggestion would be to use the card-image with a background image and then add the circular element inside it using regular content.
.card-image{
background-repeat: no-repeat;
background-size: cover;
position:relative;
overflow:hidden;
height: 300px;
width: 418px;
}
.price-wrapper{
position: absolute;
box-sizing: border-box;
left: 309px;
top: 206px;
border-radius: 100%;
width: 160px;
height: 160px;
background: rgba(0,0,0,.5);
padding: 50px;
color: #FFF;
}
<div class="row">
<div class="col s12 l4">
<div class="card">
<div class="card-image" style="background-image: url('assets/img/jonatan-pie-415847.jpg')" >
<div class="price-wrapper" >
$9.99
</div>
</div>
</div>
</div>
This approach provides more flexibility in managing the circular content. I've kept the background image as an inline style for easy modification through scripting languages like PHP.
I added some additional styling to include a price value within the circle, but feel free to adjust or remove these details based on your needs.
Just my two cents.