Здравствуйте. Не могу никак понять как сделать подобного вида меню(Как в приложении).
Пробовал через display:none->display:box; , через opacity:0->opacity:1; теперь через transform:scale(0.5); -> transform:scale(2);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="about.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="menu"></div>
<div class="show-menu"></div>
</body>
</html>
Задача такая чтобы при наведении курсора на центральный элемент, круговое меню появлялось как-бы вокруг него.
Вот одна из попыток :
html
CSS
.menu {
width:100px;
height:100px;
background:orange;
transform:scale(0.5);
}
.menu .show-menu:hover {
transform:scale(2);
}
.show-menu {
width:50px;
height:50px;
background:black;
position:absolute;
top:33px;
left:33px;
}