Efeito div circular no iDeon Park em CSS3 (multiplos)

dabblet.css

/*
Efeito div circular no iDeon Park em CSS3 (multiplos)
*/

@font-face {
    font-family: 'Museo300';
    src: url('http://ideonpark.com.br/Content/css/museo/museo300-regular-webfont.eot');
    src: url('http://ideonpark.com.br/Content/css/museo/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://ideonpark.com.br/Content/css/museo/museo300-regular-webfont.woff') format('woff'),
         url('http://ideonpark.com.br/Content/css/museo/museo300-regular-webfont.ttf') format('truetype'),
         url('http://ideonpark.com.br/Content/css/museo/museo300-regular-webfont.svg#Museo300') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
background-color: #0a0a0a;
}

table, tr, td {
border: 0;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}

#box-curves {
position: absolute;
width: 268px;
height: 408px;
left: 150px;
bottom: -80px;
}

.rounded {
	text-align: center;
	font-size: 10px;
	position: absolute;
	display: block;
	cursor: default;
	z-index: 100;
	width: 116px;
	height: 116px;
	margin: 0px;
	border-radius: 116px;
	background: #1f1f1f;	
	transition: all 0.1s;
}

.rounded.black {
	background: black;
}

.rounded:hover {
	z-index: 101;
	width: 240px;
	height: 240px;
	border-radius: 240px;
/*	left: -60px;
	top: -60px;	*/
	margin: -58px;
	
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(254,254,254,1) 15%, rgba(247,247,247,1) 49%, rgba(199,198,200,1) 84%, rgba(199,198,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(254,254,254,1)), color-stop(49%,rgba(247,247,247,1)), color-stop(84%,rgba(199,198,200,1)), color-stop(100%,rgba(199,198,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(254,254,254,1) 15%,rgba(247,247,247,1) 49%,rgba(199,198,200,1) 84%,rgba(199,198,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(254,254,254,1) 15%,rgba(247,247,247,1) 49%,rgba(199,198,200,1) 84%,rgba(199,198,200,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(254,254,254,1) 15%,rgba(247,247,247,1) 49%,rgba(199,198,200,1) 84%,rgba(199,198,200,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(254,254,254,1) 15%,rgba(247,247,247,1) 49%,rgba(199,198,200,1) 84%,rgba(199,198,200,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c7c6c8',GradientType=0 ); /* IE6-9 */
	
	/* 
	Propriedades animadas individualmente pois o FF aplica o z-index somente no final.
	Se usado "all", o box expandido fica por alguns 
	
	transition: width 0.4s, height 0.4s, margin 0.4s;
}

.rounded p {
	position: relative;
	font-size: 10px;
	font-family: Museo300, Arial;
	color: #BFBFC1;
	z-index: 10;
	user-select: none;
	transition: all 0.1s;
}

.rounded:hover p {
	color: #441657;
	font-size: 18px;
	transition: all 0.4s;
}

#box-curves > div {
	position: absolute;
}

#curv1 { top: 0px; left: 91px; }

#curv2 { top: 129px; left: 0; }

#curv3 {top: 178px;left: 152px; }

#curv4 { top: 293px;left: 80px; }

dabblet.html

<div id="box-curves">

<div id="curv1">
<div class="rounded" style="">
    <table><tbody><tr><td><p>Você não vive<br> como seu vizinho,<br> por que o seu loft<br> tem que ser igual?</p></td></tr></tbody></table>
</div>
</div>

<div id="curv2">
<div class="rounded black" style="">
    <table><tbody><tr><td><p>Soluções<br> sustentáveis<br> incorporadas à<br> rotina dos<br> moradores.</p></td></tr></tbody></table>
</div>
</div>

<div id="curv3">
<div class="rounded black" style="">
    <table><tbody><tr><td><p>A sofisticação<br> divide espaço com<br> a criatividade em<br> salas comerciais<br> versáteis e únicas.</p></td></tr></tbody></table>
</div>
</div>
 
<div id="curv4">
<div class="rounded" style="">
    <table><tbody><tr><td><p>Tenha o controle<br> do seu mundo<br> com a tecnologia<br> de automação<br> dos lofts.</p></td></tr></tbody></table>
</div>
</div>



 </div>

settings.json

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