Tutorials
|
Jan 9, 2017

Webflow Bit #1: Hover zoom effect

Find out how to easily add a zoom-on-hover effect to images — or any element — on your Webflow sites.
Hover effects are an essential interaction for linked elements. Adding a hover effect not only adds more fun to your sites design, but it also helps the user understand which elements are interactive and which aren’t.
 

In this simple demo, I’ll show you, step by step, how to create a hover zoom effect. Once you master these fundamentals, I encourage you to go beyond this zoom effect and do something even more creative.

Step 1: Select the element and add an outer glow

Adding an outer glow to an element in Webflow
To start, select the element you want the hover interaction on, and add an outer glow.

Select your image (or whichever element you would like to give this interaction to), then scroll down to the Shadows section of the Style tab. In my example, I set the outer glow to black with an opacity of 50%, with a blur of 10px to give the element some depth.

While this isn’t necessary for the zoom effect, we’ll make the interaction effect this shadow to add more drama to the interaction later.

Step 2: Scale the element down

Under Transforms, scale the image to 0.95 on the X and Y axes.

Then, scroll down to the Style tab’s Transforms section. Click the plus sign to add a new transform, switch to the scale tab, then set the X and Y axes to 0.95.

Doing this in the image’s default state will allow us to scale back to 1 on hover, creating the zoom effect.

(Optional) bonus effect: Set a grayscale filter

If you want, add a greyscale filter so the image is black-and-white by default. We'll remove this in the hover state.

Scroll down to the Effects section of the Style tab. In the filters section, click the plus button to add a new filter, then select “grayscale.” This will make the image black-and-white by default, and we’ll bring the color back on hover.

Step 3: Add transitions for each property

Under Transitions, add a timer for the scale transform, the greyscale filter, and the outer glow.

Now scroll back up the Styles tab till you reach the Transitions & Transforms section. Add a transition timer for each property you just added:

  • Transform (for the scale down)
  • Filter (for the greyscale filter)
  • Box shadow (for the outer glow)

This will set timing so each transition feels smooth and non-disruptive.

Step 4: Set your hover styles

Before continuing, switch the element to its hover state.

At the top right of the Styles tab, you’ll find a States dropdown menu. Open that dropdown and click hover.   

Click the eye icon on the transform and filter so they don't affect the hover state. This is what makes the image appear to enlarge and go full-color.

Then hide your scale and grayscale styles by clicking the eye icon next to each style.

Add a whole lot of blur (50px!) to the outer shadow so it diffuses on hover.

And finally, set your outer glow’s blur to 50px to give the element more depth. That’s it!

Step 5: Preview your work and enjoy

Click the preview button at the top left of the Designer and hover over the image to see your work.

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Nelson Abalos Jr.

Customer Support Hero. Host of the Webflow Workshops. Follow me @thepixelgeek.

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Announcements
Apr 5, 2017
How we’re making Webflow Hosting even more reliable
Find out what we learned from February 28th's Amazon Web Services outage — and how we're improving Webflow Hosting to prevent future outages.
Entrepreneurship
Apr 3, 2017
How to power your freelance web design business with Webflow – for free
Find out how to get your web design business up and running with Webflow. Without paying a cent.
Announcements
Mar 27, 2017
Redesign your website for the May 1 Reboot with Webflow
Redesign your portfolio website in time for the May 1 Reboot with Webflow — without writing code — and get 3 months of hosting free!
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.