<ul class='circle-container'>
  <li><img src='http://lorempixel.com/300/300/city'></li>
  <li><img src='http://lorempixel.com/300/300/nature'></li>
  <li><img src='http://lorempixel.com/300/300/abstract'></li>
  <li><img src='http://lorempixel.com/300/300/cats'></li>
  <li><img src='http://lorempixel.com/300/300/food'></li>
  <li><img src='http://lorempixel.com/300/300/animals'></li>
  <li><img src='http://lorempixel.com/300/300/business'></li>
  <li><img src='http://lorempixel.com/300/300/people'></li>
</ul>

// LESS version of https://codepen.io/KittyGiraudel/pen/vEJXGm
/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @author Ilko Kacharov
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
.on-circle(@item-count, @circle-size, @item-size) {
  position: relative;
  width: @circle-size;
  height: @circle-size;
  border-radius: 50%;
  padding: 0;
  list-style: none;

  img {
    width: @item-size;
    height: @item-size;
  }

  > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -(@item-size / 2);
    width: @item-size;
    height: @item-size;

    .loop( @i, @a ) when ( @i >= 0 ) {
      .loop( @i - 1, @a );

      @rot: @i * @a;
      &:nth-of-type(@{i}) {
        transform: rotate(@rot * 1deg) translate(unit((@circle-size / 2), rem))
          rotate(@rot * -1deg);
      }
    }

    @angle: (360 / @item-count);
    .loop(@item-count, @angle);
  }
}

.circle-container {
  .on-circle(@item-count: 8, @circle-size: 32rem, @item-size: 8rem);

  margin: 8rem auto;
  border: solid 5px #001529;

  img {
    border-radius: 50%;
    border: solid 5px #001529;
    display: block;
    max-width: 100%;
    max-height: 100%;
    transition: 0.15s;
    &:hover {
      border: solid 5px tomato;
    }
  }
}