Repetition Image Hover Effects

A simple and fun hover effect with repeated image layers that get scaled up and down.

The other day, I encountered a very interesting animation. It’s kind of a repetition effect on an image where the same gets scaled, layer by layer. This is Eva Habermann’s website where this element has that exact effect:

While this is a scroll based animation, there was also a hover effect somewhere, I just can’t recall where! If you’ve seen it, please let me know so that I can add it here. Found it! The amazing site of Dormeuil shows this effect on click, not hover: https://www.capsule.dormeuil.com/

There are some interesting parameters that we can play with in order to create different touches, all with a unique look and feel, so this is what I came up with, hope you enjoy it!

The way that we can define the parameters is as follows:

<div 
	class="image image--style-3" 
	data-repetition data-repetition-elems="6" 
	data-repetition-origin="150% 100%" 
	data-repetition-animate="scaleY" 
	data-repetition-stagger="-0.12" 
	data-repetition-initial-scale="1.3" 
	data-repetition-duration="0.5" 
	data-repetition-ease="power1.inOut" 
	style="background-image:url(img/11.jpg);">
</div>

We make the following structure out of this:

<div class="image image--style-3" style="background-image: none; transform-origin: 150% 100%; transform: translate(0px, 0px);">
    <div class="image__wrap">
        <div class="image__element" style="background-image: url(11.jpg); transform-origin: 150% 100%; transform: translate(0px, 0px);"></div>
    </div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
    <div class="image__element" style="background-image: url(11.jpg); transform: translate(0px, 0px);"></div>
</div>

Then we animate the “image_element” divs according to the parameters set.

Here’s a short explanation of the parameters:

data-repetition 					
// this is so that we know we have to apply the effect

data-repetition-elems="4" 			
// number of inner elements/images

data-repetition-animate="scale" 	
// property to animate: scale, scaleX, scaleY 

data-repetition-origin="50% 50%" 	
// transform origin

data-repetition-stagger="-0.1" 		
// GSAP animation stagger value between each inner image

data-repetition-initial-scale="2" 	
// this is the initial scale that is applied to the first inner child

data-repetition-duration="0.8" 		
// animation duration

data-repetition-ease="power2.inOut" 
// animation ease

There’s lots of things to experiment with here, so I hope you can use this to have some fun with it!

Here’s our first example:

The main idea is to have repeated layers of the same image and do something to them, like scale them up and down, like in this case. There’s a little twist added here, which is that the first and last layer also have a zoom effect on the image. Changing the transform origin, can also add a nice touch to it:

I really hope you enjoy this and find it useful!

Thanks for checking by and if you want to support our work, please share and give us a follow @codrops!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.