Untitled

dabblet.css

.disc-wrap {width: 300px; height: 300px; margin: 0 auto;}
.disc-wrap:hover > li {opacity: 0.5;}
.disc-wrap:hover > li:hover {opacity: 1;}
ul {margin: 0; padding: 0;}
li {list-style: none; width: 150px; height: 150px;float: left; background-color: #eee; text-align: center;}
li:hover {transform: scale(1.25)}
li:nth-child(1) {border-top-left-radius: 100%;background-color:red; transform-origin: bottom right;}
li:nth-child(2) {border-top-right-radius: 100%;background-color:lightblue;transform-origin: bottom left}
li:nth-child(3) {border-bottom-left-radius: 100%;background-color:orange;transform-origin: top right}
li:nth-child(4) {border-bottom-right-radius: 100%;background-color:darkgreen;transform-origin: top left}
li:first-child:hover {padding-top: 10px; padding-left 10px;}

dabblet.html

<!-- Trying a little UI thang -->
<div class="disc-wrap">
<ul>
	<li>Menu1</li>
	<li>Menu2</li>
	<li>Menu3</li>
	<li>Menu4</li>	
</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}