Hover effect?

[donboe]

I found this website on awwwards.com. On the home page is a Most Popular Products section

On hover there is an effect where the image get smaller and moves up and rounded grey background is appearing. I have been looking at the source but can’t figure how this effect was made. Does anybody has an idea?

Edit: Also in the blog section they have quite a nice hover effect where the photo are sliding in a bit(left and right)

Thank you in advance

[DaveMaxwell]

There’s a javascript event attached to it, so it’s not pure css

[donboe]

@DaveMaxwell AHA That’s the thing. I just saw this rule:

 .product-item .product-item-image-hover{
    width:180px;
    height:180px;
    -ms-transform:translate(-50%,-42%)  scale(.85);
        transform:translate(-50%,-42%)  scale(.85)
}

What do you think Dave. Is this doable just using CSS

[PaulOB]

You don’t need js to do that effect (except to add a click effect for touch devices perhaps).

You can just scale the image smaller on hover (as the code you have shown) then slide each of the other items up into view using a transition-delay. You can fade the buy button to full opacity and draw it up into position.

There’s loads of ways to achieve that effect but will need to delay the transition of each item if you want a staggered effect. It’s mainly a matter of time and effort in piecing it all together nicely but its not really that complicated.

[donboe]

@PaulOB That’s what I thought. They are using a color transition as well, don’t they? From white to grey. And what about the positioning? Because when the grey circle appers it is as if the images line up at the bottom of the circle?

[PaulOB]

@donboe

And what about the positioning?

The items are just translated upwards into position.

e.g.

transform:translateY(-50px)

I’m not going to copy and paste their code as that’s copyright but you can see all the rules if you grab the stylesheet and search for product-item.

Basically the elements are translated upwards but with a different transition-delay to fill the gap left by the image being scaled smaller. It’s a lla bit magic numberish but is ok for effects like that.

I haven’t look how the gray circle is done but I would do it using an :after element and scale it form zero to the size required while translating it down the page. Then transition from white to gray on the way.

I have to run now but I’ll be back later if you are still not sure. Try and get a few demos going that we can look at and tweak for you

[PaulOB]

@donboe

transform:translate(-50%,-42%) scale(.85)

Ok had a few minutes before I went out so this is very rough but has the elements in place that you need.

You can change the animation timing to cubic bezier to get the bounce effects etc.

[donboe]

@PaulOB Beautiful!!! I’m gonna play with it. I keep you informed. Thanks a lot Paul