.image-container {
  position: relative;
  width: 700px;
}

.image-container > img {
  width: 100%;
  display: block;
}

.hotspot {

  position: absolute;

  cursor: pointer;

}

.hotspot-icon {

  width: 20px;   /* change size here */
  height: auto;

  display: block;

}

/* popup image */

.card {

  position: absolute;

  bottom: 170px;
  left: -100px;

  width: 160px;

  z-index: 1000;

  opacity: 0;

  pointer-events: none;

  transform-style: preserve-3d;

  transition:
    opacity .3s ease,
    transform .6s ease;

  cursor: pointer;

}

.card.flipped {

  transform: rotateY(180deg);

}

.card-front,
.card-back {

  position: absolute;

  width: 100%;

  backface-visibility: hidden;

}

.card-back {

  transform: rotateY(180deg);

}

.hotspot:hover .card {

  opacity: 1;

  pointer-events: auto;

}

.hotspot.open .card {
  opacity: 1;
  pointer-events: auto;
}