Whats this effect called?

**Egg Bramhill** · 17 October 2021, 01:45 PM

Thanks for that Acorn. I forgot I'd done that. However I want it zoom the opposite way. I think I've found a site that may help.

**Acorn** · 17 October 2021, 03:29 PM

Originally Posted by Egg Bramhill

Thanks for that Acorn. I forgot I'd done that. However I want it zoom the opposite way. I think I've found a site that may help.

Egg, now I am confused.

My suggestion of changing the timing and scale was to give an Inner Zoom In:

<style>
.innerZoom {
background-size: 100%;
background-position: center center;
transition: all 2s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 200%;
}
</style>

If you want a Zoomed presentation moving to full image, an Inner Zoom Out, just flip the background sizes:

<style>
.innerZoom {
background-size: 200%;
background-position: center center;
transition: all 2s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 100%;
}
</style>

Acorn

**mwenz** · 17 October 2021, 04:19 PM

It's popularly called the Ken Burns effect. He didn't originate the effect but did popularize it.

https://en.wikipedia.org/wiki/Ken_Burns_effect

https://www.wevideo.com/blog/for-work/being-ken-burns (nice example down the page).

I last used it in 2010/2012 for the last website I built and maintained.

**Acorn** · 17 October 2021, 05:01 PM

Originally Posted by mwenz

It's popularly called the Ken Burns effect. He didn't originate the effect but did popularize it.
https://en.wikipedia.org/wiki/Ken_Burns_effect
https://www.wevideo.com/blog/for-work/being-ken-burns (nice example down the page).
I last used it in 2010/2012 for the last website I built and maintained.

But the approach we are using doesn't pan slowly; that is the killer part of the Ken Burns effect.
In my original Post I indicated any Animatable CSS property could be added although for fullest control, you would use @keyframes.

@Egg, you Ken Burnsed a time back as best as I recall.

Acorn

**mwenz** · 18 October 2021, 02:19 PM

Originally Posted by Acorn

But the approach we are using doesn't pan slowly; that is the killer part of the Ken Burns effect.
In my original Post I indicated any Animatable CSS property could be added although for fullest control, you would use @keyframes.

@Egg, you Ken Burnsed a time back as best as I recall.

Acorn

The Burns effect, at least the couple I've used, can be adjusted for speed and area to zoom into/out of. Burns himself used different zoom timings.

The thread simply asked "Whats [sic] this effect called?" That is all I answered.

**Acorn** · 18 October 2021, 02:39 PM

Originally Posted by mwenz

The Burns effect, at least the couple I've used, can be adjusted for speed and area to zoom into/out of. Burns himself used different zoom timings.
The thread simply asked "Whats [sic] this effect called?" That is all I answered.

And I countered as it is a Ken Burns Effect with no Pan, it isn't a Ken Burns Effect. It is just a Zoom In as there is no (presented or asked for) method to adjust where the zoom centres on.

Acorn

**mwenz** · 18 October 2021, 03:18 PM

Originally Posted by Acorn

And I countered as it is a Ken Burns Effect with no Pan, it isn't a Ken Burns Effect. It is just a Zoom In as there is no (presented or asked for) method to adjust where the zoom centres on.

Acorn

There is no need to use pan for the Burns effect. Burns also, just like those before him, used just zoom in/out. Just as he/those before him, used and/or not used multiple layers with differing movement speeds.

But hey, whatever.