Zooming-in the image centered around the cursor with CSS - css

Question

I have a map image, and I want to zoom in/out when I click on it. This code below zooms it, but I want to zoom-in the image centered around the location of the cursor and make horizontal-scroll appear. How can I do it with only CSS?
CSS
input[type=checkbox]{
display: none;
}
.container img{
transition: transform 0.25s ease;
cursor: zoom-in;
}
input[type=checkbox]:checked ~ label > img{
-webkit-transform: scale(2);
transform: scale(2);
cursor: zoom-out;
}
HTML
<div class="container"><input id="zoomCheck" type="checkbox" />
<label for="zoomCheck">
<img src="map.jpg" />
</label></div>

Answer 1

I created you the logic you can use. Just add the other functionality.
Basically, this is what you want.
Fiddle: https://jsfiddle.net/zpobnetf/11/
How can you achieve it?
Get position of click (clientX, clienY)
Clone the image into a div with background image (src of the image clicked)
Position them depending on the position that was clicked on.
As you can see on my example. I subtract clientX and clientY by 75. It's because the box that I created has a size of 150x150. I just divide it by 2. So, I can position the #box at the center.
Hope you get it. Cheers! You can do it. Just believe!
let mapa = document.getElementById('map'),
box = document.getElementById('box');
mapa.addEventListener('click', (e) => {
let xPos = (e.clientX - 75),
yPos = (e.clientY - 75);
box.style.display = 'initial';
box.style.top = `${yPos}px`;
box.style.left = `${xPos}px`;
box.style.backgroundPosition = `-${xPos}px -${yPos}px`;
});
#box {
height: 150px;
width: 150px;
background: rgba(255,255,255,0.8);
background-image: url('https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png');
background-repeat: no-repeat;
transform: scale(1.4);
position: absolute;
display: none;
}
<img id="map" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png">
<div id="box"></div>