Untitled

dabblet.css

body, body * {
	margin: 0;
	padding: 0;
	}

body * {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	}
body {
	text-align: center;
	background: #222
	}

.chakra {
	width: 50px;
	height: 50px;
	background: url('https://dl.dropbox.com/u/32750720/menu/items.png') 550px 0;	
	top: 20px;
	overflow: hidden;
	transition: .3s cubic-bezier(0,1.28,1,1.2);
	border-radius: 50%;
	/*transform: rotate(-45deg);*/
	}
	.left-container, .right-container,
	.center-vert-container, .center-hor-container,
	.top-container, .bottom-container {
		position: absolute;
		transition: .6s
		}
	.left-container, .right-container,
	.center-vert-container {
		width: 50px;
		height: 100%;
		}
		.left-container {			
			left: 30px;
			}
		.right-container {
			right: 30px;
			}
		.center-vert-container {
			left: 40%;
			}
		.center-hor-container {
			top: 40%;
			}
		.top-container, .bottom-container, .center-hor-container {			
			width: 100%;
			height: 60px;		
			left: 0;
			}
		.top-container {
			top: 30px;
			}
		.bottom-container {
			bottom: 30px;
			}

	.chakra:hover {
		width: 300px;
		height: 300px;
		overflow: visible;
		background: none;
		box-shadow: 0 0 50px rgba(255,250,255,.4), 0 0 150px rgba(2,50,250,.5);
		/*transform: rotate(45deg);*/
		}

	.chakra:hover .left-container, 
	.chakra:hover .right-container,
	.chakra:hover .center-vert-container,
	.chakra:hover .center-hor-container,
	.chakra:hover .top-container, 
	.chakra:hover .bottom-container {
		}

	.object {
		width: 50px;
		height: 50px;
		background: url('https://dl.dropbox.com/u/32750720/menu/items.png') 550px 0;
		position: absolute;
		opacity: 0;
		transition: .6s cubic-bezier(0,1.28,1,1.2);
		}	
		.object:hover {
			transform: scale(1.4,1.4)
			}	
		.center-vert-container .object:first-of-type {
			top: 0;
			background-position: 0 0;
			}
			.center-vert-container .object:nth-of-type(2):hover {
				transform: none;
				}
		.left-container .object:first-of-type,
		.right-container .object:first-of-type {
			top: 40px;			
			}	
			.left-container .object:first-of-type {
				background-position: 100px 0;
				}
			.right-container .object:first-of-type {
				background-position: 200px 0;
				}	 
		.center-vert-container .object:nth-of-type(2) {
			top: 40%;
			background-position: 550px 0;
			}
		.center-vert-container .object:nth-of-type(3) {
			bottom: 0;
			background-position: 300px 0;
			}
		.left-container .object:nth-of-type(2),
		.right-container .object:nth-of-type(2) {
			bottom: 40px;
			}
			.left-container .object:nth-of-type(2) {
				background-position: 400px 0;				
				}
			.right-container .object:nth-of-type(2) {
				background-position: 450px 0;
				}
		.center-hor-container .object:first-of-type {
			left: 0;
			background-position: 150px 0;
			}
		.center-hor-container .object:nth-of-type(2) {
			right: 0;
			background-position: 250px 0;
			}
	.chakra:hover .object {
		opacity: 1;
		}

dabblet.html

<div class="chakra">

	<div class="left-container">
		<div class="object"></div>
		<div class="object"></div>
	</div>

	<div class="right-container">
		<div class="object"></div>
		<div class="object"></div>
	</div>

	<div class="center-hor-container">
		<div class="object"></div>
		<div class="object"></div>
	</div>

	<div class="center-vert-container">
		<div class="object"></div>
		<div class="object"></div>
		<div class="object"></div>
	</div>

	<!--div class="top-container">
		<div class="object"></div>
		<div class="object"></div>
	</div-->

	<!--div class="bottom-container">
		<div class="object"></div>
		<div class="object"></div>
	</div-->

</div>

settings.json

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