Концепт на изображении. Без наведения виден только круг. При наведении появляются 4 зоны (с цифрами). При наведении на зону, как на картинке, она немного увеличивается.
Использовать можно HTML, CSS и JavaScript в крайнем случае.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНа чистом CSS
body {
margin: 0;
overflow: hidden;
}
.curcle {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 200px;
height: 200px;
margin: 25px;
border-radius: 100%;
background: #ddd;
border: 2px solid #333;
box-sizing: border-box;
transform: rotate(45deg);
}
.curcle .item {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
background: #ddd;
border-color: #333;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
opacity: 0;
}
.curcle .item:nth-child(1) {
border-left-width: 2px;
border-top-width: 2px;
border-top-left-radius: 100%;
transform-origin: right bottom;
}
.curcle .item:nth-child(2) {
border-top-width: 2px;
border-right-width: 2px;
border-top-right-radius: 100%;
transform-origin: left bottom;
}
.curcle .item:nth-child(4) {
border-right-width: 2px;
border-bottom-width: 2px;
border-bottom-right-radius: 100%;
transform-origin: left top;
}
.curcle .item:nth-child(3) {
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-left-radius: 100%;
transform-origin: right top;
}
.curcle .invert {
transform: rotate(-45deg);
}
.curcle:hover {
border: 0;
}
.curcle:hover .item {
opacity: 1;
}
.curcle .item:hover {
transform: scale(1.25);
}
/* Не относится к коду */
#anim {display: none;}
label {cursor: pointer;}
#anim:checked ~ label {color: green;}
#anim:checked ~ .curcle .item {
transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
<input type="checkbox" id="anim">
<label for="anim">Включить плавность при наведение</label>
<div class="curcle">
<div class="item">
<div class="invert">1</div>
</div>
<div class="item">
<div class="invert">2</div>
</div>
<div class="item">
<div class="invert">4</div>
</div>
<div class="item">
<div class="invert">3</div>
</div>
</div>