How to draw circle around round image with small circle on outer circle border?

css, html, javascript, jquery, twitter-bootstrap

Solution

You can create small circle on outer big circle using `before` and `after` property in css. I have tried this. I am able to create two circle's. hope this helps you to get right way... (I will update if I able to create third one or multiple)

HTML Code:

<div class="testo-body">
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
               <h3>Complex Roy</h3>
               <h5>Web Designer</h5>
               <h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
            </div>
         </div>
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client-image">
            <center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="http://placehold.it/500x500"></center>
            <div class="big-cir">
               <div class="small-cir"></div>
               <div class="small-cir2"></div>
               <div class="small-cir3"></div>
            </div>
         </div>
      </div>
   </div>

CSS Code:

.testo-body {
   background-color: white;
}

.out-cir {
   margin-top: -23%;
}

.profile {
   margin-top: -20.5%;
   margin-left: -31%;
}

.client {
   background-color: #161e43;
   color: white;
   margin-top: 10%;
}

.blue1 {}

.big-cir {
   height: 300px;
   width: 300px;
   border-radius: 50%;
   position: relative;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   animation: dotmove cubic-bezier(1,0,0,1) 2s infinite;
}

.big-cir > .small-cir {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 90px; // you may need to change this
}

.big-cir > .small-cir2 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 290px;
   top: 130px;
}

.big-cir > .small-cir3 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 150px;
   top: 290px;
}

.img-circle {
   margin: 25px;
   position: absolute;
}

.client-image {
   margin-top: -230px;
   margin-left: 10px;
}

@keyframes dotmove {
   from {
      transform: rotate(90deg);
   }
   to {
      transform: rotate(0deg);
   }
}

fiddle: https://jsfiddle.net/rahul8590/k0y00Lqc/10/

Problem

Original source