.tm-box {
position: relative;
width: 100%;
height: 100%;
line-height: 1.2em;
overflow: hidden;
z-index: 100;
}

#tm-services ul > li  {height: 370px}

#tm-services ul > li > div {
height: 250px;
width: 250px;
display: block;
margin: 0 auto;
padding: 15px 40px 40px 40px;
box-shadow: 0px -2px 3px #aaa;
}

.tm-box__right, .tm-box__left, .tm-box__top, .tm-box__bottom, .tm-box__center {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
transition: transform 0.4s ease;
}

.tm-box__right span, .tm-box__left span, .tm-box__top span, .tm-box__bottom span {
height:  100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
color: #555;
background: #035984;
padding: 0 12px;
border-radius: 0px;
}

.tm-box__right:before, .tm-box__left:before, .tm-box__top:before, .tm-box__bottom:before, .tm-box__center:before {
position: absolute;
content: '';
width: 70.71%;
/* * Calculation: * ____a____ * /|\ | * b | \ | * / a \ | * \ | / | * \ | / | * \|/________| * * a^2 = b^2+b^2 * * solve to b: * * a^2 = 2b^2 | /2 * a^2 / 2 = b^2 | sqrt * a / sqrt(2) = b * * Percentage: * a = 100% * 100 / sqrt(2) = 70.71% * ------ */
height: 70.71%;
transform: rotate(45deg);
}

.tm-box__right:hover, .tm-box__left:hover, .tm-box__top:hover, .tm-box__bottom:hover, .tm-box__center:hover {
transform: translateX(0);
z-index: 1;
}

.tm-box__right:hover:before, .tm-box__left:hover:before, .tm-box__top:hover:before, .tm-box__bottom:hover:before, .tm-box__center:hover:before {
width: 100%;
height: 100%;
transform: none;
}

.tm-box__right {
transform: translateX(100%);
}

.tm-box__right:before {
right: 100%;
bottom: 0;
transform-origin: 100% 100%;
}

.tm-box__right:hover ~ .tm-box__center {
transform: translateX(-100%);
}

.tm-box__left {
transform: translateX(-100%);
}

.tm-box__left:before {
left: 100%;
transform-origin: 0 0;
}

.tm-box__left:hover ~ .tm-box__center {
transform: translateX(100%);
}

.tm-box__top {
transform: translateY(-100%);
}

.tm-box__top:before {
top: 100%;
right: 0;
transform-origin: 100% 0;
}

.tm-box__top:hover ~ .tm-box__center {
transform: translateY(100%);
}

.tm-box__bottom {
transform: translateY(100%);
}

.tm-box__bottom:before {
bottom: 100%;
left: 0;
transform-origin: 0 100%;
}

.tm-box__bottom:hover ~ .tm-box__center {
transform: translateY(-100%);
}

.tm-box__center {
z-index: -1;
}