Custom style to create a round circular image layout in HTML and CSS

         Everyone like to create an attractive and creative layout in their website. Don't worry I think this one must give you all the idea to do that. Check out the Source Code

        Lets's start with the HTML code.

<div class="base" >
  <div class="circleMap"  >
    <div class="circleMap__items top" >
      <img src="assets/apple%20jar.jpg" />
      <div class="circleMap__items--text" >
        First image of the circle <br> and <span class="yl">Color Changes</span>
      </div>
    </div>
    <div class="circleMap__items left" >
      <img src="assets/house%20place.jpg" />
      <div class="circleMap__items--text" >Left side image of the<br>circle and
        <span class="vl" >color change</span></div>
    </div>
    <div class="circleMap__items bottom" >
      <img src="assets/apple%20jar.jpg" />
      <div class="circleMap__items--text" >Bottom side image of the circle 
        <span class="rd" >color change</span></div>
    </div>
    <div class="circleMap__items right" >
      <img src="assets/work%20laptop.jpg" />
      <div class="circleMap__items--text" >Right side image of the circle<br>and 
        <span class="cb" >color change</span></div>
    </div>
    <div class="circleMap__items center" >
      <img src="assets/apple%20jar.jpg" />
      <div class="circleMap__items--text" >Center of the circle<br> and 
        <span class="yl" >color change</span></div>
    </div>
  </div>
</div>

The above is the HTML section of the layout. Here we have the multiple sections of css 

codes. 1 . Circular layout, 2 . Position for each, 3 . color to text.Lets See the sections seperatly.

Circular layout

.circleMap {
  width: 500px;
  height: 500px;
  min-height: 500px;
  min-width: 500px;
  border-radius: 50%;
  border: 1px dashed #888888;
  position: relative;
  margin: 80px;
}
.circleMap__items {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  position: absolute;
  text-align: center;
}
.circleMap img{
  height: 100px;
  width: 100px;
  border-radius: 50px;
  border: 2px solid #642577 ;
  object-fit: cover;
}
.circleMap--text{
  background-color: #F5F5F5;
  font-family: Roboto,sans-serif;
  font-size: 14px;
  text-align: center;
}
Positions
.top{
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.left{
  top: 50%;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
}
.right{
  top: 50%;
  right: 0;
  transform: translateX(50%) translateY(-50%);
}
.bottom{
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
}
.center{
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Text Color

.yl{
  color: #968D1F;
}
.vl{
  color: #8E0AE0;
}
.rd{
  color: #FF0000;
}
.cb{
  color: #388E8B;
}

Think this blog will give a good idea to you peoples. 
THANK YOU