Code 2

.hexagons {
    margin-top:-130px;
    margin-left: -1120px;
    color: black;
    font-family: helvetica;
}

.hello  {
    position: absolute;
    width:0px;
    height:150px;
    margin-left: 25px;
    margin-top:20px;
    top:15px;
    margin-top:0px;
    opacity:0;
   -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.hexside:hover .hello {
    width:100px;
    height:150px;
    opacity:1;
 -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

.hello b {
    text-transform: uppercase;
}


.hello2  {
    position: absolute;
    width:0px;
    height:0px;
    margin-left: 60px;
    margin-top:20px;
    top:15px;
    margin-top:0px;
    opacity:0;
     -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;


}

.myhexside:hover .hello2 {
    width:150px;
    height:150px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

.hello2 b {
    text-transform: uppercase;
}

.hello3  {
    position: absolute;
    width:0px;
    height:150px;
    margin-left: 40px;
    margin-top:20px;
    top:15px;
    margin-top:0px;
    opacity:0;
      -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

.yourhexside:hover .hello3 {
    width:150px;
    height:150px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

.hello3 b {
    text-transform: uppercase;
}

.hello4  {
    position: absolute;
    width:0px;
    height:150px;
    margin-left: 60px;
    margin-top:20px;
    top:15px;
    margin-top:0px;
    opacity:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.ourhexside:hover .hello4 {
    width:150px;
    height:150px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.hello4 b {
    text-transform: uppercase;
}


.hello5  {
    position: absolute;
    width:0px;
    height:0px;
    margin-left: 40px;
    margin-top:20px;
    top:15px;
    margin-top:0px;
    opacity:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.andhexside:hover .hello5 {
    width:150px;
    height:150px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

.hello5 b {
    text-transform: uppercase;
}



.hello a {
    color: {color:Link};
}


.hexside {
	float: left;
	margin-left: 1155px;
	margin-top:100px;
	position: fixed;
}


.hexside:hover {
    opacity: 1;


}

.hexside1 {
	height: 0px;
	width: 0px;
	border-bottom: 10px solid {color:hexagon1};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.hexside2 {
	width: 34px;
	height: 20px;
	background-color: {color:hexagon1};
}


.hexside3 {
	height: 0px;
	width: 0px;
	border-top: 10px solid {color:hexagon1};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}





.myhexside {
	float: left;
	margin-left: 1135px;
	margin-top:135px;
	position: fixed;
}



.myhexside:hover {
    opacity: 1;
}



.hexside4 {
	height: 0px;
	width: 0px;
	border-bottom: 10px solid {color:hexagon2};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.hexside5 {
	width: 34px;
	height: 20px;
	background-color: {color:hexagon2};
}

.hexside6 {
	height: 0px;
	width: 0px;
	border-top: 10px solid {color:hexagon2};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.yourhexside {
	float: left;
	margin-left: 1155px;
	margin-top:170px;
	position: fixed;
}




.yourhexside:hover {
    opacity: 1;
}



.hexside12 {
	height: 0px;
	width: 0px;
	border-bottom: 10px solid {color:hexagon4};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.hexside22 {
	width: 34px;
	height: 20px;
	background-color: {color:hexagon4};
}

.hexside32 {
	height: 0px;
	width: 0px;
	border-top: 10px solid {color:hexagon4};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}


.ourhexside {
	float: left;
	margin-left: 1135px;
	margin-top:205px;
	position: fixed;
}




.ourhexside:hover {
    opacity: 1;
}

.hexside42 {
	height: 0px;
	width: 0px;
	border-bottom: 10px solid {color:hexagon3};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.hexside52 {
	width: 34px;
	height: 20px;
	background-color: {color:hexagon3};
}

.hexside62 {
	height: 0px;
	width: 0px;
	border-top: 10px solid {color:hexagon3};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.andhexside {
	float: left;
	margin-left: 1155px;
	margin-top: 240px;
	position: fixed;
}



.andhexside:hover {
    opacity: 1;
}

.hexside422 {
	height: 0px;
	width: 0px;
	border-bottom: 10px solid {color:hexagon5};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}

.hexside522 {
	width: 34px;
	height: 20px;
	background-color: {color:hexagon5};
}

.hexside622 {
	height: 0px;
	width: 0px;
	border-top: 10px solid {color:hexagon5};
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
}