Streaming live at 10am (PST)

Mouseover animation


#1

Hey guys/girls,

I’m at a point with my website where I’m largely happy with most of the parts on it, though now I’d like to introduce a little more movement with various scroll/mouseover/page load animations; without making it too distracting, of course.

At the moment I’d like to create a mouseover animation which causes the image to zoom much like the one’s on this page https://www.gillespies.co.uk/projects - this problem is I can’t work out how to do it because the image is not an image element, it’s a “background” image being grabbed from the CMS so it doesn’t take into account overflow being set to not visible.

If you scroll to the bottom of my home page, you’ll see the images I’d like to achieve this on:

Here’s the share link:

https://preview.webflow.com/preview/roberts-limbrick?preview=17cf1ed66cc0eb6e9c6cc667f77ae01f


#2

Hello @Macker

You can achieve this very easy with a some tweaks in your structure of elements, you can look how it’s built here:

https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

Go to page ‘zoom image on hover’


#3

Thanks!

I’ve tried this, but every time I mouse over, the padding seems to disappear. I don’t quite understand why it should suddenly ignore padding?


#4

That’s because transformations such as scale(x,y) affect element rendering. Not calculating their properties. Unless you use css - box-sizing - You can find a bit of literature here https://css-tricks.com/box-sizing/

Here’s a quick webflow’y sample
https://preview.webflow.com/preview/simple-hover-element?preview=99db074092cb1aafab6d80dbdb2eab1c

  • hopefully this helps.

#5

Perfect! Cracked it I think.

Now to get my text to stay the same size! Any ideas?!


#6

Make the video that scales as an absolute element and your text element into the parent element not the scalable one.


#7

That works well, however when I mouse over the text it doesn’t trigger the scale animation (have updated the site so you can see what I mean)


#8

I have updated my - preview link! There should be the answer you’re looking for.


#9

Thank you both so much for the help!