Easy Tech TutsHow to Add Link to an Image in Webflow Easily 2026
By Impran M NLast checked against official docs
An Image element in Webflow has no link setting of its own. To make a picture clickable you put it inside a Link block, a container that behaves like a Div block except that everything inside it becomes one link.
The link settings live on the block, and the picture is simply its content. This guide covers adding the Link block, nesting and choosing the image, setting the destination, and giving the result a hover state and alt text so it works for keyboard and screen-reader users too. It also explains the two restrictions that trip people up: you can't put another link inside a Link block, and one of the link types needs a paid plan.
01Find the Link block in the Add panel
Open the Add panel from the left toolbar (or press A) and type into its search box. A partial match like "lin" brings up Link block, Text link and Spline Scene.
Link block is the one you want. Text link is meant for inline text and won't hold an image. The "Add a section" AI prompt at the top of the panel is unrelated.
02Drop it on the page and nest an Image inside
Drag the Link block onto the canvas wherever the clickable image should sit: a header, a card, a standalone section. It arrives as an empty box, and the Navigator shows a new Link block node under the container you dropped it into.
With the Link block selected, drag an Image element into it, either from the Add panel or from elsewhere on the canvas. Check the Navigator: Image should be indented one level under Link block, not sitting beside it.
If you already have a Div block wrapping the image, you can skip this by right-clicking the Div block and converting it to a Link block. Webflow refuses the conversion if the Div block already contains a link, because links can't be nested.
03Choose the picture and write its alt text
The nested Image starts as a placeholder. Select it, open the Element settings panel (D) and click Choose image to pick an asset, or click the cloud icon to upload one.
Webflow caps image uploads at 4MB. In the same Image settings, set Alt text to Custom description and describe the image, ideally hinting at where the link goes.
Don't pick Decorative here. When an image is the only thing inside a link, its alt text is what a screen reader announces as the link's name, and a decorative image leaves the link unnamed.
04Set the destination on the Link block
Select the Link block itself, not the image, and open the Element settings panel (D). With a Link block selected you can also just press Enter.
Choose a link type and fill in its settings: URL for any address, Page for another page on your site, Page section for a section on the current page, Collection page for CMS items, Email and Phone to start a message or a call, and File to link an uploaded asset. File is a paid-plan feature.
To reach a section on a different page, use URL. Tick Open in a new tab if you want that behaviour.
It usually suits external links and rarely suits internal navigation. Because the destination belongs to the block, you can swap the picture later without touching the link.
05Give it a hover state
A still image gives no hint that it's clickable, so add some feedback. Webflow's own recommendation: select the Link block, open States and choose Hover, then change a property such as box shadow, opacity or scale.
Go back to the None (default) state and add a transition for that same property so the change animates. Style the Link block, not the image inside it.
If you later put text inside the block, it will show up blue and underlined because of the default All links styling. Remove that by setting text decoration and colour on the Link block; setting them on the text element won't clear the underline.
06Publish and click through on the live site
Click Publish in the top-right corner and open the live site once it has deployed. Click the image there and confirm the destination, the tab behaviour and the hover effect.
On touch screens there is no hover, so make sure the image still reads as a link without it. If anything is off, the fix is almost always in the Link block's settings.
Frequently asked questions
Can I link an image without a Link block?
Not natively. Webflow's documented way to turn an image into a link is to drop it inside a Link block. Another option is to size the Link block and give it a background image set to cover, with no Image element at all.
How do I make the linked image open in a new tab?
Select the Link block, open the Element settings panel and tick Open in a new tab. The option is there for URL, Page, Collection page and File links.
Why isn't my hover effect showing?
Usually because the hover state was set on the nested image. Put it on the Link block, and add a transition on the block's default state so the change animates.
Why can't I drop a button or text link into the Link block?
Webflow doesn't allow links inside links. Use a Text block styled like a button (or given your button class) instead; the whole Link block is already clickable.
Will a linked image hurt my SEO?
No. A Link block outputs a normal link. Give the nested image descriptive alt text, since Webflow notes search engines use it to understand what the image shows.
Sources and last check
Screens and the Add panel search come from a walkthrough recording. Link types, the paid-plan restriction on File links, the no-nested-links rule, the hover-state method, alt text options and the 4MB image limit were re-checked against Webflow's Help Center in September 2026. The earlier version of this guide listed file downloads as a standard link option without the plan requirement; that has been corrected.
About the author
Impran M N
I've been hooked on technology for as long as I can remember — especially the new tools and AI apps that seem to land every other week. Easy Tech Tuts is where I write up whatever I've just worked out: I do the task in the real product, record the screen, and turn it into the guide I wish I'd found first.
