Streaming live at 10am (PST)

BeoPlay Gallery animation on mouse over


#1

I am trying to make this rollover animation for a gallery

Is there a way to do it in webflow i dont know how to add interaction to a background image.


#2

You don’t need interactions, you just need CSS and the :hover state.

  • First with your element selected on the default state, go to Transitions and add Background position.
  • add your background to the normal state if it’s not already done
  • switch to the hover state and go zoom your bg a bit

Now it should zoom on hover.

Of course use a larger image than the box to keep a good quality. if the box is 100 x 100, you need a @2x image of 200 x 200. But take the zoomed state into account and provide the necessary dimensions. (like 220 x 220.


#3

thank you i can animate the background position but on the hover state when i change the background size it doesn’t animate it it just do a static zoom. i there a way to give a transition to the zoom