Is there a way to enlarge the center image by 1.25 times compared to the outer images? You can view the code on this codepen. For a simplified explanation of the code, check out this link.
I have attempted to adjust the circle size but it ends up affecting all images.
<ul class='circle-container'>
<li><img src='http://lorempixel.com/100/100/city'></li>
<li><img src='http://lorempixel.com/100/100/nature'></li>
<li><img src='http://lorempixel.com/100/100/abstract'></li>
<li><img src='http://lorempixel.com/100/100/cats'></li>
<li><img src='http://lorempixel.com/100/100/food'></li>
<li><img src='http://lorempixel.com/100/100/animals'></li>
<li><img src='http://lorempixel.com/100/100/business'></li>
</ul>
/// Mixin for arranging items in a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
///
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
@mixin distribute-on-circle($nb-items, $circle-size, $item-size) {
$half-item: ($item-size / 2);
$half-parent: ($circle-size / 2);
position: relative; /* 1 */
width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none; /* 2 */
box-sizing: content-box; /* 3 */
> * { /* 4 */
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -$half-item;
}
$angle: (360 / $nb-items);
$rot: 30;
@for $i from 1 through $nb-items {
> :nth-of-type(#{$i}) {
transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
}
$rot: ($rot + $angle);
}
}
.circle-container {
@include distribute-on-circle(6, 20em, 6em);
margin: 5em auto 0;
border: solid 1px tomato;
}
.circle-container img {
display: block;
width: 100%;
border-radius: 50%;
}