<div class="krug_gr">
<a class="logo" href="#"><img src="logo_montaj.jpg" alt="Центр Лого" title="Главная"/></a>
<a class="krug_menu1" href="#"><img src="montaj_otoplenie_doma.png" alt="Отопление" title="Отопление" /><span class="podpisRazd">Отопление</span></a>
<a class="krug_menu2" href="#"><img src="montaj_tepliy_pol.png" alt="Тёплый пол" title="Тёплый пол"/><span class="podpisRazd">Тёплый пол</span></a>
<a class="krug_menu3" href="#"><img src="montaj_vodosnabjen.png" alt="Водоснабжение" title="Водоснабжение"/><span class="podpisRazd">Водоснабжение</span></a>
<a class="krug_menu4" href="#"><img src="montaj_kanalizacia.png" alt="Канализация" title="Канализация" /><span class="podpisRazd">Канализация</span></a>
<a class="krug_menu5" href="#"><img src="montaj_santexn.png" alt="Сантехника" title="Сантехника" /><span class="podpisRazd">Сантехника</span></a>
</div>
----CSS----
.krug_gr {
position: relative;
width: 24em;
height: 24em;
padding: 0.8em;
border-radius: 50%;
margin: 39px 0 0 65%;
z-index: 2;
}
.krug_gr a {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
margin: -2em;
}
.krug_gr a .podpisRazd {
color: #fff;
position: absolute;
background: #0094fe;
padding:2px;
top: -46px;
left: -50px;
}
.podpisRazd:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.krug_gr img {
width: 8em;
height: 8em;
top: -50%;
left: -50%;
position: relative;
border-radius: 50%;
}
.logo_montaj{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
margin: -100px 0 0 -100px;
background: url(logo.jpg)no-repeat;
}
.logo_montaj img {
width: 120px;
height: 120px;
top: -105%;
left: -105%;
position: relative;
border-radius: 50%;
}
.krug_menu1 {
transform: rotate(230deg) translate(10em) rotate(-230deg);
}
.krug_menu1 img a:hover{
border-color: transparent;
}
.krug_menu1 img {
width: 80px;
height: 80px;
border-radius:50%;
position:relative;
border: 4px solid #f6e121;
}
.krug_menu1 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu2{
transform: translate(-10em);
}
.krug_menu2 img {
border: 4px solid #f6e121;
border-radius: 50%;
width: 80px;
height: 80px;
}
.krug_menu2 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu3{
transform: rotate(125deg) translate(10em) rotate(-125deg);
}
.krug_menu3 img {
width: 80px;
height: 80px;
background: #846040 no-repeat;
border: 4px solid #f6e121;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
}
.krug_menu3 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu4{
transform: rotate(75deg) translate(10em) rotate(-75deg);
}
.krug_menu4 img {
border: 4px solid #f6e121;
width: 80px;
height: 80px;
background: #886010 no-repeat;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
}
.krug_menu4 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}
.krug_menu5 {
transform: rotate(384deg) translate(10em) rotate(-384deg);
}
.krug_menu5 img {
border: 4px solid #f6e121;
width: 80px;
height: 80px;
background: #0f036d no-repeat;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
}
.krug_menu5 img:hover {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
border-color: transparent;
}