/*
* The flip box container 
*
* The border property usage demonstrates that the flip itself goes out of the box on hover.
* If perspective is removed, the 3D effect does not appear.
*/
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 170px;
  /*
  border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* If this is removed, the 3D effect does not appear. */
  margin: 0 auto;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Horizontal flip appears upon the mouse moved over the flip box container. */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* The position of the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  filter: drop-shadow(8px 8px 10px gray);
}

/* The front side style (fallback if image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* The back side style */
.flip-box-back {
  background-color: #fff;
  color: black;
  transform: rotateY(180deg);
}

/* 3D Flip Box (Vertical) */
.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-back {
  transform: rotateX(180deg);
}