.circle-container {
  position: relative;
  width: 20em;
  height: 20em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
  border: solid 5px tomato;
}
.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 6em;
  height: 6em;
}
.circle-container > *:nth-of-type(1) {
  -webkit-transform: rotate(270deg) translate(10em) rotate(-270deg);
          transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.circle-container > *:nth-of-type(2) {
  -webkit-transform: rotate(330deg) translate(10em) rotate(-330deg);
          transform: rotate(330deg) translate(10em) rotate(-330deg);
}
.circle-container > *:nth-of-type(3) {
  -webkit-transform: rotate(30deg) translate(10em) rotate(-30deg);
          transform: rotate(30deg) translate(10em) rotate(-30deg);
}
.circle-container > *:nth-of-type(4) {
  -webkit-transform: rotate(90deg) translate(10em) rotate(-90deg);
          transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.circle-container > *:nth-of-type(5) {
  -webkit-transform: rotate(150deg) translate(10em) rotate(-150deg);
          transform: rotate(150deg) translate(10em) rotate(-150deg);
}
.circle-container > *:nth-of-type(6) {
  -webkit-transform: rotate(210deg) translate(10em) rotate(-210deg);
          transform: rotate(210deg) translate(10em) rotate(-210deg);
}
.circle-container img {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  border: solid 5px tomato;
  -webkit-transition: .15s;
  transition: .15s;
}
.circle-container img:hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}