JSFiddle - React, Tailwind, and code Playground

by Max Shu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<div class="hotspot-wrapper" style="width: 100%; max-width: 2083px">
<img src="https://hse.ru/mirror/pubs/share/184820693" data-width="2083" data-height="1954" style="width: 100%;" />
<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827014" data-file="bakalavr_02-01.jpg" style="top: 3.12%; left: 3.60%; width: 10.41%; height: 5.88%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827082" data-file="bakalavr_02-02.jpg" style="top: 3.48%; left: 54.72%; width: 14.21%; height: 7.06%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827092" data-file="bakalavr_02-03.jpg" style="top: 12.2%; left: 81.51%; width: 9.16%; height: 7.67%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827101" data-file="bakalavr_02-04.jpg" style="top: 40.5%; left: 81.46%; width: 11.23%; height: 10.03%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827128" data-file="bakalavr_02-05.jpg" style="top: 49.07%; left: 58.90%; width: 16.46%; height: 7.16%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827135" data-file="bakalavr_02-06.jpg" style="top: 30.8%; left: 81.46%; width: 8.40%; height: 8.7%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827147" data-file="bakalavr_02-07.jpg" style="top: 30.85%; left: 54.53%; width: 11.56%; height: 7.06%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827154" data-file="bakalavr_02-08.jpg" style="top: 49%; left: 3.45%; width: 18.38%; height: 7%;"></a>

<a class="hotspot" href="https://hse.ru/mirror/pubs/share/184827161" data-file="bakalavr_02-09.jpg" style="top: 58.34%; left: 15.41%; width: 11.47%; height: 11.5%;"></a>

<a class="hotspot"...

SCSS

.hotspot {position: absolute; border: 1px solid #ececec; border-radius: 3px; opacity: 0.8}
.hotspot-wrapper {position: relative;}
.hotspot:hover {border-color: #4E88C7;}

.mfp-bg {background: #fff;}
.mfp-figure:after {box-shadow: 0 0 20px rgba(0,0,0,0.15);}

/* 

====== Zoom effect ======

*/
.mfp-zoom-in {
  
  /* start state */
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out; 
    transform: scale(0.8); 
  }
  
  &.mfp-bg {
    opacity: 0;
	  transition: all 0.3s ease-out;
  }
  
  /* animate in */
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: scale(1); 
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }
  
  /* animate out */
  &.mfp-removing {
    
    .mfp-with-anim {
      transform: scale(0.8); 
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }
    
  }
  
}

JavaScript

$('.hotspot-wrapper').magnificPopup({
  delegate: 'a',
  type: 'image',
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
      // just a hack that adds mfp-anim class to markup 
       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
       this.st.mainClass = 'mfp-zoom-in';
    }
  },
  closeOnContentClick: true,
  image: {
    verticalFit: false
  },
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});