<figure class="hotspot-image">
  <h2>Hotspot image title</h2>
  
  <div class="hotspot-image__image">
    <img src="https://i.ytimg.com/vi/8gH-d_qsKEA/maxresdefault.jpg">
    
    <div>
    
          <span class="hotspot-image__hotspot  hotspot-image__hotspot--active a"></span>
    <span class="hotspot-image__hotspot b"></span>
    <span class="hotspot-image__hotspot  hotspot-image__hotspot--large c"></span>

      
    </div>
  </div>
  
  <div class="hotspot-image__description">
    some description from a rich text editor that contains stuff!
  </div>
    
    <div class="hotspot-image__hotspots">
      <div class="hotspot-item">
        <img class="hotspot-item__icon"src="http://majorspoilers.com/wp-content/uploads/2012/03/hulkTHUMB.jpg">
        <div class="hotspot-item__content">
          <h2>Title</h2>
          <div>
            <p>some content</p>
          </div>
        </div>
      </div>
    </div>
<div>

@keyframes hotspot-dot-animation {
    0% {
        transform: scale(0);
    }

    55% {
        transform: scale(1);
        opacity: 1;
    }

    75% {
        transform: scale(1);
        opacity: 0;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes active-hotspot-animation {
  0% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}



figure {
    margin: 0;
}

.hotspot-image {
    display: block;

    &__image {
        position: relative;
    }

    &__hotspot {
        position: absolute;
        display: inline-block;
        transform: translate(-20px, -20px);

        // the entire circle with border
        &:before {
            content: '';
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: block;
            background: white;
            border-radius: 50%;
            opacity: 0.75;
            background: transparent;
            border: 5px solid white;
            box-shadow: 0 0 10px #333;
            box-sizing: border-box;
            position: relative;
            transition: border 1s ease-in, background 1s ease-in-out;
        }

        // the dot in the middle
        &:after {
          content: '';
          display: inline-block;
          width: 100%;
          height: 100%;
          background: white;
          position: absolute;
          left: 0;
          top: 0;
          transform: scale(0);
          border-radius: 50%;
          box-sizing: border-box;
        }

        &:hover {
          &:after {
              animation-name: hotspot-dot-animation;
              animation-iteration-count: infinite;
              animation-duration: 1.5s;
          }
        }

        &--active {
            &:before {
                opacity: 1;
                animation-name: active-hotspot-animation;
                animation-iteration-count: infinite;
                animation-duration: 2s;
            }
        }

        &--large {
            transform: scale(2);
        }
    }


    &__description {
        padding: 10px 20px;
    }

    &__hotspots {
        display: block;
    }
}






.hotspot-item {
  display: none;
  background: #a9a9a9;
  
  &:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
  }
  
  &__icon {
    width: 150px;
    height: 150px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  &__content {
    padding: 10px 20px;
  }
}








.a {
    left: 40%;
    top: 20%;
}

.b {
    left: 70%;
    top: 50%;
}

.c {
    left: 20%;
    top: 65%;
}