Круглое меню с плавным увеличением картинок

Отличное и очень редкое круглое меню, в котором при наведение мышку плавно увеличивается в размерах. Скажу сразу, что под такое меню Вам придётся подстраивать дизайн у всего сайта, так как меню является уникальным и необычной формы. Чем то форма этого меню напоминает менюшку у мобильных телефонов. Все картинки в этом круглом меню имеют размер 80 на 80 пикселей, и при желании их можно заменить на свои и на под тематику Вашего сайта. Ссылки в коде меню нужно изменить на свои. Если же у Вас остались какие-то вопросы, тогда задавайте их в комментариях чуть ниже.

<style> 
.circles {width:320px; height:320px; border-radius:320px; margin:50px auto; position:relative; border-radius:320px;} 
.circles a.tgt {display:block; position:absolute; left:128px; top:0; width:64px; height:64px; border-radius:64px; z-index:100;
-webkit-transform-origin:32px 160px; 
-moz-transform-origin:32px 160px; 
-ms-transform-origin:32px 160px; 
-o-transform-origin:32px 160px; 
transform-origin:32px 160px; 
} 
.circle li:nth-child(2), 
.circles a:nth-child(2) { 
-webkit-transform: rotate(40deg); 
-moz-transform: rotate(40deg); 
-ms-transform: rotate(40deg); 
-o-transform: rotate(40deg); 
transform: rotate(40deg); 
} 
.circle li:nth-child(3), 
.circles a:nth-child(3) { 
-webkit-transform: rotate(80deg); 
-moz-transform: rotate(80deg); 
-ms-transform: rotate(80deg); 
-o-transform: rotate(80deg); 
transform: rotate(80deg); 
}.circle li:nth-child(4), 
.circles a:nth-child(4) { 
-webkit-transform: rotate(120deg); 
-moz-transform: rotate(120deg); 
-ms-transform: rotate(120deg); 
-o-transform: rotate(120deg); 
transform: rotate(120deg); 
} 
.circle li:nth-child(5), 
.circles a:nth-child(5) { 
-webkit-transform: rotate(160deg); 
-moz-transform: rotate(160deg); 
-ms-transform: rotate(160deg); 
-o-transform: rotate(160deg); 
transform: rotate(160deg); 
} 
.circle li:nth-child(6), 
.circles a:nth-child(6) { 
-webkit-transform: rotate(200deg); 
-moz-transform: rotate(200deg); 
-ms-transform: rotate(200deg); 
-o-transform: rotate(200deg); 
transform: rotate(200deg); 
} 
.circle li:nth-child(7), 
.circles a:nth-child(7) { 
-webkit-transform: rotate(240deg); 
-moz-transform: rotate(240deg); 
-ms-transform: rotate(240deg); 
-o-transform: rotate(240deg); 
transform: rotate(240deg); 
} 
.circle li:nth-child(8), 
.circles a:nth-child(8) { 
-webkit-transform: rotate(280deg); 
-moz-transform: rotate(280deg); 
-ms-transform: rotate(280deg); 
-o-transform: rotate(280deg); 
transform: rotate(280deg); 
} 
.circle li:nth-child(9), 
.circles a:nth-child(9) { 
-webkit-transform: rotate(320deg); 
-moz-transform: rotate(320deg); 
-ms-transform: rotate(320deg); 
-o-transform: rotate(320deg); 
transform: rotate(320deg); 
} 
ul.circle {padding:0; margin:0; list-style:none; width:320px; height:320px; position:absolute; left:0; top:0; z-index:10;} 
ul.circle li {position:absolute; left:128px; top:0; width:64px; height:64px; border-radius:64px; 
-webkit-transform-origin:32px 160px; 
-moz-transform-origin:32px 160px; 
-ms-transform-origin:32px 160px; 
-o-transform-origin:32px 160px; 
transform-origin:32px 160px; 
} 
ul.circle li b {display:block; width:64px; height:64px; border-radius:64px; text-align:center; margin:0; position:relative; 
-webkit-transition: 0.5s; 
-moz-transition: 0.5s; 
-ms-transition: 0.5s; 
-o-transition: 0.5s; 
transition: 0.5s; 
} 
ul.circle li b img {width:62.5%; height:62.5%; padding-top:18.75%; 
-webkit-transition: 0.5s; 
-moz-transition: 2s; 
-ms-transition: 0.5s; 
-o-transition: 0.5s; 
transition: 0.5s; 
} 
.circle li:nth-child(2) b { 
-webkit-transform: rotate(-40deg); 
-moz-transform: rotate(-40deg); 
-ms-transform: rotate(-40deg); 
-o-transform: rotate(-40deg); 
transform: rotate(-40deg); 
} 
.circle li:nth-child(3) b { 
-webkit-transform: rotate(-80deg); 
-moz-transform: rotate(-80deg); 
-ms-transform: rotate(-80deg); 
-o-transform: rotate(-80deg); 
transform: rotate(-80deg); 
} 
.circle li:nth-child(4) b { 
-webkit-transform: rotate(-120deg); 
-moz-transform: rotate(-120deg); 
-ms-transform: rotate(-120deg); 
-o-transform: rotate(-120deg); 
transform: rotate(-120deg); 
} 
.circle li:nth-child(5) b { 
-webkit-transform: rotate(-160deg); 
-moz-transform: rotate(-160deg); 
-ms-transform: rotate(-160deg); 
-o-transform: rotate(-160deg); 
transform: rotate(-160deg); 
} 
.circle li:nth-child(6) b { 
-webkit-transform: rotate(-200deg); 
-moz-transform: rotate(-200deg); 
-ms-transform: rotate(-200deg); 
-o-transform: rotate(-200deg); 
transform: rotate(-200deg); 
} 
.circle li:nth-child(7) b { 
-webkit-transform: rotate(-240deg); 
-moz-transform: rotate(-240deg); 
-ms-transform: rotate(-240deg); 
-o-transform: rotate(-240deg); 
transform: rotate(-240deg); 
} 
.circle li:nth-child(8) b { 
-webkit-transform: rotate(-280deg); 
-moz-transform: rotate(-280deg); 
-ms-transform: rotate(-280deg); 
-o-transform: rotate(-280deg); 
transform: rotate(-280deg); 
} 
.circle li:nth-child(9) b { 
-webkit-transform: rotate(-320deg); 
-moz-transform: rotate(-320deg); 
-ms-transform: rotate(-320deg); 
-o-transform: rotate(-320deg); 
transform: rotate(-320deg); 
} 
.circles a.tgt:hover {display:block; position:absolute; left:96px; top:-32px; width:128px; height:128px; border-radius:128px; z-index:100; z-index:50; 
-webkit-transform-origin:64px 192px; 
-moz-transform-origin:64px 192px; 
-ms-transform-origin:64px 192px; 
-o-transform-origin:64px 192px; 
transform-origin:64px 192px; 
} 
.circles a.p1:hover ~ .circle li:nth-child(1) b, 
.circles a.p2:hover ~ .circle li:nth-child(2) b, 
.circles a.p3:hover ~ .circle li:nth-child(3) b, 
.circles a.p4:hover ~ .circle li:nth-child(4) b, 
.circles a.p5:hover ~ .circle li:nth-child(5) b, 
.circles a.p6:hover ~ .circle li:nth-child(6) b, 
.circles a.p7:hover ~ .circle li:nth-child(7) b, 
.circles a.p8:hover ~ .circle li:nth-child(8) b, 
.circles a.p9:hover ~ .circle li:nth-child(9) b 
{width:128px; height:128px; border-radius:128px; margin-left:-32px; margin-top:-32px;} 
.circles a.p1:hover ~ .circle li:nth-child(2) b, 
.circles a.p2:hover ~ .circle li:nth-child(3) b, 
.circles a.p3:hover ~ .circle li:nth-child(4) b, 
.circles a.p4:hover ~ .circle li:nth-child(5) b, 
.circles a.p5:hover ~ .circle li:nth-child(6) b, 
.circles a.p6:hover ~ .circle li:nth-child(7) b, 
.circles a.p7:hover ~ .circle li:nth-child(8) b, 
.circles a.p8:hover ~ .circle li:nth-child(9) b, 
.circles a.p9:hover ~ .circle li:nth-child(1) b 
{width:112px; height:112px; border-radius:112px; margin-left:-24px; margin-top:-24px;} 
.circles a.p1:hover ~ .circle li:nth-child(3) b, 
.circles a.p2:hover ~ .circle li:nth-child(4) b, 
.circles a.p3:hover ~ .circle li:nth-child(5) b, 
.circles a.p4:hover ~ .circle li:nth-child(6) b, 
.circles a.p5:hover ~ .circle li:nth-child(7) b, 
.circles a.p6:hover ~ .circle li:nth-child(8) b, 
.circles a.p7:hover ~ .circle li:nth-child(9) b, 
.circles a.p8:hover ~ .circle li:nth-child(1) b, 
.circles a.p9:hover ~ .circle li:nth-child(2) b 
{width:96px; height:96px; border-radius:96px; margin-left:-16px; margin-top:-16px;} 
.circles a.p1:hover ~ .circle li:nth-child(4) b, 
.circles a.p2:hover ~ .circle li:nth-child(5) b, 
.circles a.p3:hover ~ .circle li:nth-child(6) b, 
.circles a.p4:hover ~ .circle li:nth-child(7) b, 
.circles a.p5:hover ~ .circle li:nth-child(8) b, 
.circles a.p6:hover ~ .circle li:nth-child(9) b, 
.circles a.p7:hover ~ .circle li:nth-child(1) b, 
.circles a.p8:hover ~ .circle li:nth-child(2) b, 
.circles a.p9:hover ~ .circle li:nth-child(3) b 
{width:80px; height:80px; border-radius:80px; margin-left:-8px; margin-top:-8px;} 
.circles a.p1:hover ~ .circle li:nth-child(9) b, 
.circles a.p2:hover ~ .circle li:nth-child(1) b, 
.circles a.p3:hover ~ .circle li:nth-child(2) b, 
.circles a.p4:hover ~ .circle li:nth-child(3) b, 
.circles a.p5:hover ~ .circle li:nth-child(4) b, 
.circles a.p6:hover ~ .circle li:nth-child(5) b, 
.circles a.p7:hover ~ .circle li:nth-child(6) b, 
.circles a.p8:hover ~ .circle li:nth-child(7) b, 
.circles a.p9:hover ~ .circle li:nth-child(8) b 
{width:112px; height:112px; border-radius:112px; margin-left:-24px; margin-top:-24px;} 
.circles a.p1:hover ~ .circle li:nth-child(8) b, 
.circles a.p2:hover ~ .circle li:nth-child(9) b, 
.circles a.p3:hover ~ .circle li:nth-child(1) b, 
.circles a.p4:hover ~ .circle li:nth-child(2) b, 
.circles a.p5:hover ~ .circle li:nth-child(3) b, 
.circles a.p6:hover ~ .circle li:nth-child(4) b, 
.circles a.p7:hover ~ .circle li:nth-child(5) b, 
.circles a.p8:hover ~ .circle li:nth-child(6) b, 
.circles a.p9:hover ~ .circle li:nth-child(7) b 
{width:96px; height:96px; border-radius:96px; margin-left:-16px; margin-top:-16px;} 
.circles a.p1:hover ~ .circle li:nth-child(7) b, 
.circles a.p2:hover ~ .circle li:nth-child(8) b, 
.circles a.p3:hover ~ .circle li:nth-child(9) b, 
.circles a.p4:hover ~ .circle li:nth-child(1) b, 
.circles a.p5:hover ~ .circle li:nth-child(2) b, 
.circles a.p6:hover ~ .circle li:nth-child(3) b, 
.circles a.p7:hover ~ .circle li:nth-child(4) b, 
.circles a.p8:hover ~ .circle li:nth-child(5) b, 
.circles a.p9:hover ~ .circle li:nth-child(6) b 
{width:80px; height:80px; border-radius:80px; margin-left:-8px; margin-top:-8px;} 
</style> 
<div class="circles"> 
<a class="tgt p1" href="#"></a> 
<a class="tgt p2" href="#"></a> 
<a class="tgt p3" href="#"></a> 
<a class="tgt p4" href="#"></a> 
<a class="tgt p5" href="#"></a> 
<a class="tgt p6" href="https://gig-life.ru/"></a> 
<a class="tgt p7" href="#"></a> 
<a class="tgt p8" href="#"></a> 
<a class="tgt p9" href="#"></a> 
<ul class="circle"> 
<li><b><img src="/s/web/uCoz/1/i1.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i2.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i3.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i4.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i5.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i6.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i7.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i8.png" alt="" /></b></li> 
<li><b><img src="/s/web/uCoz/1/i9.png" alt="" /></b></li> 
</ul> 
</div>