There is a site with a gallery. It is required to make the images enlarge on hover. But they go beyond the screen. How to fix it?

Question

JavaScript

Did it like this:

.content .col-12 .card .img .block:hover {
          transform: scale(2);
          background-color: white;
          transition: 0.1s all;
        }

And when you zoom in, you get this:

How do I fix this?
Block code with a picture:

<div class="block">
    <img class="lazyImg" data-original="img/Grandex/Adventure/A-403.JPG" alt="Картинка">
    <p>A-403</p>
</div>

Answer 1

The panolens.js library wants to have a specific version of three.js that it has as a dependency ( currently 0.105.2 ), and yours is using a different version. Replace three.js in your project with version 0.105.2 - npm keeps old packages, so this shouldn't be a problem.

Answer 2

https://www.w3schools.com/csSref/css3_pr_transform... will help you