We get tons of requests for thumbnail overlay tutorials.
Probably because it’s a fairly popular design pattern, and a flexible one with all kinds of applications. After all, we’re always trying to find ways to reveal just enough content to get people to act, without overwhelming them.
For this tutorial, I’ll show you how to use Webflow interactions to display text over a thumbnail image on hover, a popular method for blog designs.
As you work, you can reference my image overlay design.
How to show text on hover (using Webflow interactions)
Step 1: Let’s create our thumbnail block
To get started, I’m going to drag a div block into a 3-column layout. I’ll give this div block a class (called “Thumbnail Block”), and add these styles:
Class Name: Thumbnail Block
Background Image (set to Cover, and Center)
It’s important to set the position to Absolute, and we’ll see why in the next step.
Step 2: Add the text
Now we’ll add the text that will appear on hover. First we’ll drag in a Div Block, then place a Heading 3 and a Paragraph inside the div.
Then we’ll add a class to our Div Block (calling it “Text Wrapper”) so we can execute our CSS animation, and add these styles:
Class Name: Text Wrapper
Padding: 20px on all sides
Position: Absolute - Cover
Background Color: rgba(0,0,0,0.8)
Text Color: White
Absolute positioning works on this block because the thumbnail block it’s inside of has a position of Relative. This makes the Text Wrapper absolutely positioned, relative to the Thumbnail Block.
Step 3: Add an interaction to our Text Wrapper
You can handle this next step in one of two ways — you can either use simple CSS right inside the Styles Panel or use Webflow interactions. For this example, I’ll use Webflow interactions.
We need to add an interaction to our Text Wrapper. We’ll do that by selecting the element, then navigating to the Interactions panel and creating a new interaction.
We’ll give it a name, and then add the initial appearance (the appearance of the object before any trigger occurs). In this case, we want the text to have an initial appearance of 0% Opacity so it’s invisible.
Step 4: Add a hover trigger
Now that we have the initial appearance, let’s add the trigger to execute the interaction. We’ll click the “+” button in the Triggers section, then select Hover as our trigger option.
In our Hover Over section, we’ll set the element to go from 0% opacity (its initial appearance) to 100% opacity over 500 milliseconds.
When we Hover Out of the element, we want it to return to its initial appearance of 0% opacity.
Step 5: Preview
And that’s it! Taking a look in preview mode, we see that the text is invisible by default, but becomes visible on hover.
Play with your options!
Of course, this is just one way to achieve a text overlay. You can create a variety of different effects just by tweaking the Initial Appearance and hover options.
For example, in the interaction below, I changed the initial appearance of the Text Wrapper to scale it up to 110% (1.1), and then scale it down to its original size on hover in, then back to 110% (hover out). That really adds some “pop” to the effect.
Share your work
Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.
Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.
BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.
Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.
Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.
As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.
Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.
Did we miss any standouts? Let us know in the comments!