JSFiddle - React, Tailwind, and code Playground

HTML

<div class="superzoom">
      <img class="drift-demo-trigger" 
      data-zoom="img-media-01.jpg"  
      src="img-grande-01.jpg" width="350px">
      <div class="detail">
      </div>     
      </div>
      <div id="miniatura">
      <p>Passe o mouse sobre a imagem para ampliar.</p>
      <img src="img-thumb-01.jpg" width="50px" height="50px">
      <img src="img-thumb-02.jpg" width="50px" height="50px">
      <img src="img-thumb-03.jpg.jpg" width="50px" height="50px">
       </div>

CSS

.superzoom{ width:350px; display: table; max-width: 350px !important; }
      .superzoom:hover .detail {display: block}
      .drift-demo-trigger {  width: 350px;    float: left; background-color: red;      }
      .detail { position: absolute;   width: 450px;    height: 450px;    margin-left: 350px;  float: left; border:1px solid #EEEEEE; display: none;  }    
      .ix-link {    display: block;    margin-bottom: 3em;      }
      @media (max-width: 900px) {   
      .detail, .drift-demo-trigger {     float: none;   }
      .drift-demo-trigger {   max-width: 100%;  width: auto;   margin: 0 auto;        }
      .detail {      margin: 0;          width: auto;        }
      .responsive-hint {          display: none;        }
      .drift-bounding-box {          display: none;        }      }
      #miniatura{float:none; clear: left; width:350px; text-align: center;}

JavaScript

new Drift(document.querySelector('.drift-demo-trigger'), {
        paneContainer: document.querySelector('.detail'),
        inlinePane: 1000,
        inlineOffsetY: -85,
        containInline: true,
        hoverBoundingBox: true
      });