i76 i76 - 2 months ago 24
CSS Question

Ken Burns zoom in effect using CSS

I was looking at this website-

http://melaniedaveid.com/

And it has a very nice zoom in (Ken Burns effect) on some of the images. I like the smoothness of the animation.

This is the CSS divs use-

.project .project__header .header__image {
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(1);
transition: transform 15s linear 0s;
width: 100%;
}


I tried doing something similar but this does not work for me. What am I missing?

Answer

You need to have the transition happen on hover. So it would look something like this: https://jsfiddle.net/kzam3Lo7/

img {
  background-position: center center;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1);
  width: 100%;
}

img:hover {
  transform: scale(2);
  transition: transform 15s linear 0s;
}