Animations, Layout & Design

Scaling a clipped image on hover in Framer

Scaling a clipped image on hover in Framer

Scaling a clipped image on hover in Framer

Wes

·

5:41

·

7.1K views

·

Jan 13, 2026

About this lesson

In this quick tip, we’ll build a clean, timeless hover effect that works on just about any website. It’s subtle, intentional, and easy to reuse — no trendy tricks that age poorly.

We’ll start with a simple card, add a smooth image zoom on hover, and wrap it up by turning the whole thing into a flexible, reusable component you can drop anywhere in your layout.

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=0s Intro

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=30s Building a simple card layout

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=104s Turning the card into a hover component

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=173s Fixing image overflow with a wrapper

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=216s Adding polish and transitions

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=282s Making the card reusable

https://www.youtube.com/watch?v=oii3YlOBCBQ&t=328s Wrap up

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Learning this hover effect has got to be 0:02the biggest no-brainer. It's not very 0:05flashy, but that's why it's so powerful.0:09Design trends, they're going to come and 0:11they're going to go real quick, meaning 0:13trendy sites become outdated sites very 0:17fast. This effect is safe. It's pretty 0:21much timeless. So, it's worth knowing 0:24how to do it. So, let me show you how 0:26it's done.0:30So, let's start by making a really 0:32simple card. Just an image and some text 0:35underneath it. I'll start by hitting F 0:38on the keyboard to use the frame tool.0:40And then I'll just draw a nice looking 0:42rectangle. Actually, it doesn't have to 0:44look nice at all because I can tweak the 0:47width and the height over here like so.0:51I'm also going to lock the aspect ratio 0:54like this just to make sure that no 0:56matter how wide the screen gets, the 0:58image always stays this shape. Now, the 1:01only thing that this image is missing is 1:04an image. So, go over to the style 1:06section of the properties panel and 1:09click image. There are several ways to 1:12add an image, but I'm just going to 1:14paste one in from my clipboard.1:18Then we'll add some text by hitting T on 1:21our keyboard to use the text tool and 1:24clicking underneath the image. Then I'm 1:26just going to type card text.1:30We're going to change this later, by the 1:31way. Let's select both the text and the 1:34image. And then we're just going to wrap 1:36it in a stack. Make sure the width is 1:39set to fixed, the height is set to fit,1:44distribute is set to start, and we'll 1:48align it to the left as well. This is 1:50where you can go and tweak any other 1:52settings that you want to make it look a 1:54little bit different, like padding, gap,1:56color, these things. We'll also make 1:59sure that we have the width of the image 2:02set to fill.2:04Now, we're going to select the parent 2:06layer again and turn it into a component 2:10so that we can add the hover effect. I'm 2:12just going to name it card. You can name 2:14it whatever. It's uh the world is your 2:17oyster. It's your call. Now, we have our 2:20component. So, with the card selected,2:24we can click the button below it and 2:26select hover to create a hover state.2:30Select the image in the hover state. Go 2:33over to the properties panel, click 2:36transforms,2:38and then scale.2:40Now we can change the scale of the image 2:42and make it larger. So I'll increase 2:44mine by 0.1. If we go ahead and preview,2:48we can see that it's kind of there, but 2:53it definitely looks wrong. The image is 2:56bigger, but it's overlapping the text,2:59and it just doesn't look very good. we 3:02need to contain it so that the image 3:04gets bigger but it stays the same width 3:07and height. So to do that we select the 3:10image in the default state and we'll 3:13wrap it in a stack. The most important 3:16part of this entire effect is to make 3:19sure that the overflow is set to clip.3:22Hidden works too, but clip does the job 3:25just fine. I'll name this layer image 3:28wrapper.3:30Now, when we preview the component, it 3:32works. This is good. It could look a 3:36little nicer, though. So, I'm going to 3:37add a little polish. With the image 3:40wrapper selected, we'll add a radius of 3:4410, then a border, and I'll make it 3:49white with 5% opacity.3:53If you want to get creative and add 3:54anything else, which I totally 3:55recommend, just make sure that you add 3:57it to the image wrapper and not the 3:59image itself. Otherwise, it might 4:02disappear when it goes into the hover 4:04state. I'm also going to make the text 4:06in the hover state go white.4:11And then lastly, I think that a slow 4:14transition would look really good.4:16Something like this.4:23Go ahead and check the preview. Yeah,4:25that looks really good. I think it would 4:27actually look better if it didn't zoom 4:29in as much. So, I'm I'm going to switch 4:33it to 1.05.4:37Yeah, that's better. Now, this is meant 4:39to be a card component that we're going 4:41to be reusing. So, let's make sure it's 4:44actually reusable. We'll turn the image 4:46into a variable like so.4:51We'll do the same with the text.5:00And then I'm going to add a link 5:03variable to the parent layer.5:07Now we can go back. We'll go home. Drag 5:10it into this grid that I set up.5:13And there you have it. A quick, easy,5:16and versatile hover effect that you can 5:18apply to any image or card on just about 5:22any style of website. Serious. I'm 5:25serious. It's powerful. So, use it 5:28wisely. I'll see you in the next one.

TeachesHover & Press Frames

Also coversComponents Grids Keyboard Shortcuts Links Sizing Spacing Stacks Transitions & Easing Variables

Watch on YouTube ↗

‹ Goodbye green screen: Framer’s new 'infinite' video sets

Framer Update: On-Page Editing 2.0 ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.