.demo{
margin:0 auto;
width:656px;
}
.demo .hexa{
float:left;
margin:24px 7px;
}
.hexagon{
display:inline-block;
height:225px;
list-style-type:none;
overflow:hidden;
position:absolute;
transform:rotate(120deg);
visibility:hidden;
width:150px;
}
.hexagon-in1{
display:block;
overflow:hidden;
width:100%;
height:100%;
transform:rotate(-60deg);
}
.hexagon-in2{
display:block;
width:100%;
height:100%;
background-position:0 25px;
background-repeat:no-repeat;
overflow:hidden;
visibility:visible;
line-height:200px;
background-size:100%;
transform:rotate(-60deg);
background-position:center center;
-webkit-transition:all 0.6s linear 0s;
-moz-transition:all 0.6s linear 0s;
-o-transition:all 0.6s linear 0s;
-ms-transition:all 0.6s linear 0s;
transition:all 0.6s linear 0s;
filter:brightness(0.8);
}
.demo2{
margin:-36px auto 0;
visibility:hidden;
width:656px;
}
.auxhex{
background:none repeat scroll 0 0 red;
display:inline-block;
height:1px;
width:78px;
}
.auxhex2{
background:none repeat scroll 0 0 green;
display:inline-block;
height:1px;
width:160px;
}
.conthexa{
display:inline-block;
height:174px;
margin-left:10px;
width:150px;
}
.hexagon-in2:hover{
filter:brightness(1);
-webkit-transition:all 0.05s linear 0s;
-moz-transition:all 0s linear 0s;
-o-transition:all 0s linear 0s;
-ms-transition:all 0s linear 0s;
transition:all 0s linear 0s;
}