Zooming in on A SPECIFIED AREA of the image

The idea of my website is to compare two articles - one of my own and another one alongside it.

I am using the feature of Google called GoFullPage to take screenshots of entire pages.

I want to zoom on each paragraph separately so that people can see each of my paragraphs along with the specific paragraphs shown in the screenshot.

At first I tried to use a offset: path() with a transition of the width attribute - which didn't work, it automatically changed the rotation of the screenshot in 90 degrees and displayed it horizontally with and without the width attribute added.

After that I tried to add a transition to the top: 0; attribute - which almost got me the effect I wanted to have.

Eventually I tried to just add a transition with two negative margins: margin-top: -20% & margin-bottom: -20% - which worked properly only in the upper parts of the screenshot.

But it had a very big problem - the screenshot had still the negative margin values.

So neither the negative margin seems to work to achieve the zoom effect.

I looked this up and found there is a zoom property, can it get me the effect that I need?

Is there maybe a better way? JavaScript?

THIS IS THE CODE:

body {
  overflow-x: hidden;
}

.drag-container {
  display: flex;
  min-height: 100vh;
}

[class^="panel"] {
  padding: 0px 0px;
  background-color: white;
}

.panel-one {
  width: 48.9%;
}

.panel-two {
  flex: 1;
  width: 52.1%;
}

.dragbar {
  position: relative;
  padding: 2px;
  cursor: pointer;
  background-color: rgb(25, 0, 75);
}

.slider {
  position: relative;
  z-index: 9;
  cursor: pointer;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
}

.reference-image {
  position: relative;

  width: 100%;
  height: 100%;

  transition-property: width , top , margin-top;
  transition-duration: 1s;

  margin-top: 0;
  margin-bottom: 0;
}

.reference-image:hover {
  width: 179.1%;

  margin-top: -20%;
  margin-bottom: -20%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" ; href="COPY.css">

  <title>History of Africa</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      text-align: center;
    }
  </style>

</head>

<body>
  <!-- DRAG BAR (IMAGE) -->
  <div class="drag-container">
    <div class="panel-one" ; id="drag-left">

      <img src="https://i.sstatic.net/QSr5pLZn.png" ; style="display: block; width: 100%;">

      <h1 style="text-decoration: underline;">Safkfsdf Akslefos Alpsdfd</h1>

      <br>
      <br>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam reprehenderit modi eius
        numquam.Quia saepe nulla aliquid nesciunt et a pariatur expedita mollitia. Suscipit
        necessitatibus temporibus architecto ea rerum eveniet.
        Vitae quis sint tenetur impedit corrupti esse error amet minima enim. Eos quas similique
        aperiam itaque autem. Veritatis optio deleniti, deserunt animi soluta, nam ab aut maxime
        inventore quis voluptate.
        Ipsam, corporis earum. Ipsa quasi ipsum eius, dolor dolore assumenda! Eum quod fugit iste
        dignissimos exercitationem libero, numquam reprehenderit, rerum totam, delectus expedita
        voluptas nam unde! Magnam corrupti ratione amet.
        Quaerat quasi qui pariatur earum nobis velit, nemo consectetur laborum tenetur sed! Modi
        ipsa temporibus mollitia dolor inventore. Sapiente molestias alias nesciunt! Dolor non
        quas soluta eaque repellendus enim ipsam.
      </p>
    </div>

    <div class="dragbar" ; id="dragbar">
      <div class="slider"></div>
    </div>

    <div class="panel-two" ; id="drag-right">

      <img class="reference-image" ; src="https://i.sstatic.net/jN8q6WFd.png" ; width="100%" ; height="100%">
      
    </div>
  </div>

</body>

</html>

Solution

If you use a background image you can adjust the background-size and background-position to achieve zoom effects.

const d2 = document.querySelector('.d2')
document.addEventListener('click', evt => {
  if (!evt.target.dataset.index) return
  d2.className = "d2"
  switch(Number(evt.target.dataset.index)) {
    case 1:
      d2.classList.add('zoom','cyan')
      break
    case 2:
      d2.classList.add('zoom','yellow')
      break
    case 3:
      d2.classList.add('zoom','green')
      break
    case 4:
      d2.classList.add('zoom','blue')
      break
    case 5:
      d2.classList.add('zoom','red')
      break
    case 6:
      d2.classList.add('zoom','navy')
      break
  }
})

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.d1 {
  padding: 1em;  
}

.d2 {
  height: 100vh;
  background: url(https://i.sstatic.net/jN8q6WFd.png);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

.d2.zoom {
  background-size: 150%;
}

.d2.cyan {
  background-position: right 16%;
}

.d2.yellow {
  background-position: right 30%;
}

.d2.green {
  background-position: right 44%;
}

.d2.blue {
  background-position: right 58%;
}

.d2.red {
  background-position: right 72%;
}

.d2.navy {
  background-position: right 86%;
}

<div class="d1">
  <p>Zoom to different sections with the buttons below</p>
  <button data-index="0">Reset</button>
  <button data-index="1">Cyan</button>
  <button data-index="2">Yellow</button>
  <button data-index="3">Green</button>
  <button data-index="4">Blue</button>
  <button data-index="5">Red</button>
  <button data-index="6">Navy</button>
</div>
<div class="d2"></div>