CodePen

HTML

            
              <div id="example-6" class="single-example">
	<span class="statiSquare-value">15%</span>
	<span class="statiSquare-value">30%</span>
	<span class="statiSquare-value">20%</span>
	<span class="statiSquare-value">15%</span>
	<span class="statiSquare-value">10%</span>
	<span class="statiSquare-value">10%</span>
</div>
            
          
!

CSS

            
              
.block{
	float: left;
	background-color: #888;
	border-radius: 2px;
	outline:1px solid #fff;
}

.block.active{
	background-color:#BADA55;
}
.block:hover{
	box-shadow:0 0 5px 0 rgba(0,0,0,.7);
}
.statiSquare-single{
	overflow:hidden;
}
.statiSquare-map{
	position:absolute;
	outline:1px solid #fff;
}
.statiSquare-map:hover{
	box-shadow:0 0 10px 0 rgba(0,0,0,.7);
}

.statiSquare-bars{
	outline:1px solid #fff;
	float:left;
}
.statiSquare-bars:hover{
	box-shadow:0 0 10px 0 rgba(0,0,0,.7);
}
#example-3,
#example-4{
	position:relative;
}
.value-label{
	padding:5px;
	color:#fff;
	font-size:10px;
	display:block;
	background:rgba(0,0,0,.7);
	cursor:default;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#example-6').statiSquare({'width' : 200, 'type': 'map', 'theme' : 'aurora', 'hasValue' : true });
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................