css animation - zooming element from its position to center

Question

This is an example of the effect I want:
http://photoswipe.com/
The same effect is used for image zooming on WhatsApp web.

I want to zoom elements (not just images) to the center, with an animation scaling element from its position to the center of the page.
The animation should be css based, JS should not be used for animation purposes.

I've tried the following code, which doesn't do the job:

<div></div>

With the css:

div {
  width: 100px; height: 100px; background: blue;
transition: transform 1s
}

div:hover {
  transform: scale(2);
}

And, what's the difference between animating transform: scale or width/height?

Thanks

EDIT:
Another attempt: http://jsfiddle.net/4w06Lvms/

Answer 1

I have made something similar to what you want (view in full screen). You can modify it as per needs. Move pointer out of the screen to get back to original state.

Also, animating using scale is better as you might not know the exact height and width in pixels if there are multiple images and using the same scale value gives your code uniformity. Hope it helps.

 html,body{ margin:0; } .container{ background:yellow; display:flex; width:100vw; height:100vh; justify-content:center; transition: 0.5s ease; vertical-align:center; } .imageHover{ display:flex; height:300px; width:200px; transition: 0.5s ease; } img{ position:absolute; height:300px; width:200px; transition: 0.5s ease; } .container:hover > .imageHover{ height:100vh; background-color:black; width:100vw; transition: 0.5s ease; } .container:hover > .imageHover > img{ transform:translate(240%,50%) scale(1.6); transition: 0.5s ease; }

 <div class="container"> <div class="imageHover"> <img id="yo" src="https://picsum.photos/200/300 " alt=""> </div> </div>

Answer 2

You can set the position of the image to fixed, but you will need to know the offset of x and y position of the image, after that start the animation.

In this case the offset x and y are 30px, because I've set parent div padding to 30px.

When the window is scrolled down or right. You have to recalculate the top and left values of the image. For that you'll need JS.

I've set the top and left to the offset values before I've set the position to fixed. Then the image starts moving at the right position.

On photoswipe, they are using a translate3d() function and they are using JS, too. I have no idea what they are doing.

 #image { /* top and left offset */ top: 30px; left: 30px; width: 200px; height: 200px; transition: top 2s, left 2s, transform 2s; } #image:hover { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } #offset { background-color: beige; height: 1000px; /* given offset */ padding: 30px; }

 <div id="offset"> <img id="image" src="https://picsum.photos/200/300 " alt=""> </div>