Changing the background image of a circle - html

Question

I am trying to draw a number of CSS generated circles that have images as background. In my current code, the background image is set as a fixed image in the CSS code.
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url("http://deepchains.com/images/team.png") center / cover no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
color: transparent;
}
.circle:hover {
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
.ccont:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Here is a sample result that I see in Chrome Browser:
My question is how to change the background images of each circle separately in the HTML code? I will have a number of these circles that I like them to be aligned and in the same line, and I want to set their background images in the HTML code and remove the background image from the CSS. How can I do that?

Answer 1

An easy solution is to transform your peudo element to an element and use background-image as inline style so you can easily change the image for each element and apply all the same properties as the pseudo element:
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle .image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover .image {
opacity: 1;
color: transparent;
}
.circle:hover .ccont{
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<span class="image" style="background-image: url(http://lorempixel.com/400/300/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<span class="image" style="background-image:url(https://lorempixel.com/400/200/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>

Answer 2

Simply set up the background image on the pseudo to be inherited from parent, set the size on parent to 0 to hide it there, and finally, set style="background-image: url(...)" in the markup.
Updated
You can even drop the inner div and still achieve the same effect
Stack snippet
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-weight: bold;
text-decoration: none;
border: 0;
margin: 10px;
background-size: 0; /* hide image by set its size to 0 */
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit; /* inherit from parent */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
}
.circle:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html" style="background-image: url(https://picsum.photos/300/300?image=1070);">
This is <br>Text1
</a>
<a class="circle" href="http://www.url2.html" style="background-image: url(https://picsum.photos/300/300?image=1072);">
This is <br>Text2
</a>
</div>