.hexagon {
  position: relative;
  margin: 0px auto;
  width:87px;
  height: 150px;
 /*background-image: url('https://i.imgur.com/IEiqEV0.jpg');*/
  background-position: center center;
  z-index: 1;
  /* Text styling 
  line-height: 110px;  letter-spacing: 6px;*/
  text-align: center;
  font-family: sans-serif;
  font-size: 1em; 
  font-weight: bold;

  color: gray;
  color: #060557;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
  background:green;


}
.hexagon2 {
  position: relative;
  margin: 0px auto;
  width:139px;
  height: 240px;
 /*background-image: url('https://i.imgur.com/IEiqEV0.jpg');*/
  background-position: center center;
  z-index: 1;
  /* Text styling  letter-spacing: 6px;
  line-height: 110px;*/
  text-align: center;
  font-family: sans-serif;
  font-size: 15px;
  font-weight:bold;
 
  color: #fff;
  color: #060557;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
  background:green;
   background:linear-gradient(#99ff66,#ffffff 60%); 
}



.hexagon:hover, .hexagon2:hover {
  color: #fff;
  text-shadow: 0 0 10px white;
}

.hexagon .face1,
.hexagon .face2 ,
.hexagon2 .face1,
.hexagon2 .face2 

{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  z-index: -1;
  /* Keeps borders smooth in webkit */
  backface-visibility: hidden;
}
.hexagon .face1:before,
.hexagon .face2:before,
.hexagon2 .face1:before,
.hexagon2 .face2:before 

{
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: inherit;
}

.hexagon .face1 { transform: rotate(60deg); }
.hexagon .face1:before {
  left: 0;
  transform-origin: left top;
  transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon2 .face1 { transform: rotate(60deg); }
.hexagon2 .face1:before {
  left: 0;
  transform-origin: left top;
  transform: rotate(-60deg) translate(-110px, 0);
}



.hexagon .face2 { transform: rotate(-60deg); }
.hexagon .face2:before {
  right: 0;
  transform-origin: right top;
  transform: rotate(60deg) translate(110px, 0);
}
.hexagon2 .face2 { transform: rotate(-60deg); }
.hexagon2 .face2:before {
  right: 0;
  transform-origin: right top;
  transform: rotate(60deg) translate(110px, 0);
}

/*td
{
  padding-left:50px;
   padding-right:50px;
   padding-bottom:20px;
}*/

.hexagon2 {
  position: relative;

}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  margin-left:50%;
  background-color:white;
  overflow: hidden;
  width: 50%;
  height:0;
  transition: .5s ease;
 

}


.hexagon2:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 9px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.img:hover
{
  opacity: 0.8;
  cursor:pointer;
}

.face1,
.face2
{
  visibility: hidden;
}