/* CSS Document */
.flipbox {
  width: auto; /* adjust as needed */
  height: 300px;
  perspective: 1000px;
  position: relative;
}

.flipbox-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.flipbox:hover .flipbox-inner {
  transform: rotateX(180deg);
}

.flipbox-front,
.flipbox-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 10px;	
}

.flipbox-front img,
.flipbox-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flipbox-front-text,
.flipbox-back-text {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 5px;
  box-sizing: border-box;
  transition: bottom 0.5s;
  bottom: 0; /* visible by default */	
}
.front-icon {
  position: absolute;
  top: -180px; /* adjust so it sits on top of dark strip */
  left: 50%;
  transform: translateX(-50%);
  width: 128px !important; /* desired size */
  height: 128px !important;
  max-width: none;
}

.flipbox-back-text {
  bottom: -100%; /* hidden until hover */
}

.flipbox:hover .flipbox-front-text,
.flipbox:hover .flipbox-back-text {
  bottom: 0;
}

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