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/

score 0 · Answer 1 · answered Aug 23 '18 at 08:47

0

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>

answered Aug 23 '18 at 08:47

Ashley Fernandes

1,179
10
18

What if I dont have a fixed height for my element? My elements are inside a bootstrap grid – user3599803 Aug 23 '18 at 14:41
That's better.. I've used fixed sizes since I knew the dimensions. The img is in a div with class imageHover which expands to full screen (the black background) . So the size of the image does not matter. – Ashley Fernandes Aug 23 '18 at 14:46
Kindly mark as selected answer so that it helps others too. – Ashley Fernandes Aug 23 '18 at 16:22
I've tried your translate() with my example, and the problem is, that not every element is actually centered. See my attempt here: http://jsfiddle.net/4w06Lvms/. So using translate(240%, 50%) does not work for every element (it does not bring the element to the center) – user3599803 Aug 23 '18 at 20:42
You can't do it with bootstrap grid as the elements parent has to be a full screen http://jsfiddle.net/supercoder123/qu5e6b19/ i tried my best here. It's not perfect but i hope it helps – Ashley Fernandes Aug 24 '18 at 09:26
So if I do use some JS, how can I calculate the the correct translate() so the element moves from its position to the center? – user3599803 Aug 24 '18 at 09:37

DanOPT · Answer 2 · 2018-10-11T03:18:48.393

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>

css animation - zooming element from its position to center

2 Answers2