CODEWITHSUNDEEP
css
iwsnmw
iwsnmw

Reputation: 642

Zooming-in the image centered around the cursor with CSS

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>

Upvotes: 2

Views: 4592

Answers (1)

hdotluna
hdotluna

Reputation: 5732

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?

  1. Get position of click (clientX, clienY)

  2. Clone the image into a div with background image (src of the image clicked)

  3. 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>

Upvotes: 1

Related Questions