JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col about-profile align-center">
   <a class="js-open-modal">
      <img src="http://uf.framefaktur.de/content/images/about/photo_patricia.jpg" class="about patricia" alt="">
      <div id="patricia" class="modal-box">
         <strong>Patricia Mestanza Niemi</strong> works as an editor for cinema trailers and feature films. Cutting has been her passion for over 20 years, in which she built a vast network of Filmmakers. The idea of capturing the stories of this “new normal” prompted her to call the UNIFIED FILMMAKERS Festival.
      </div>
   </a>
   <br>
   <strong>Patricia Mestanza Niemi</strong><br>
   <small><em>Festival Director</em></small>
</div>

CSS

.modal-box {
  display: none;
}

.js-open-modal:hover .modal-box {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}