.service-block{
  z-index: 100;
  position: relative;
  background-color: white;
  padding: 30px 30px 120px;
}

.service-block:hover{
  color: white;
}

.service-align-right:before,
.service-align-right:after{
  background-position-x: 100%;
  background-position-y: 100%;
}

.service-align-left:before,
.service-align-left:after{
  background-position-x: 0;
  background-position-y: 100%;
}

.service-block:before{
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: -101;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: ;
}

.service-block:hover:before{
  opacity: 0;
}

.service-block:after{
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.service-block:hover:after{
  opacity: 1;
}

@media screen and (min-width: 768px){

  .service-block{
    z-index: 100;
    position: relative;
    background-color: white;
    padding: 30px;
  }
}