Changing the background image of a circle

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>