How to create hover text effect over an image

Build a common interaction design in 5 simple steps.

How to create hover text effect over an image

Mat Vogels
Co-founder
View author profile
Mat Vogels
Co-founder
View author profile

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

Width: 100%

Height: 300px

Position: Absolute

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.

Add a div block to contain the thumbnail.

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 add another div to contain a heading and body copy.

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

Then style your text and the background opacity.

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.

Add the interaction and set the initial appearance.

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.

Add the hover trigger.

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.

Preview your interaction.

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.

Scaling the copy up and down on hover in and hover out adds some pop.

Share your work

Try it for yourself, then share your work with us on Facebook and Twitter!

Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Read now

Read now

Last Updated
November 16, 2015
Category

Related articles

How to create a pop-up modal in Webflow
How to create a pop-up modal in Webflow

How to create a pop-up modal in Webflow

How to create a pop-up modal in Webflow

Design
By
Mat Vogels
,
,
Read article
Simple guide to make creative image hover effects
Simple guide to make creative image hover effects

Simple guide to make creative image hover effects

Simple guide to make creative image hover effects

Design
By
Jeff Cardello
,
,
Read article
How to create and build a progress bar with Webflow
How to create and build a progress bar with Webflow

How to create and build a progress bar with Webflow

How to create and build a progress bar with Webflow

Development
By
Aaron Grieve
,
,
Read article
How to show and hide content with Webflow click interactions
How to show and hide content with Webflow click interactions

How to show and hide content with Webflow click interactions

How to show and hide content with Webflow click interactions

Design
By
Mat Vogels
,
,
Read article
Webflow Bit #1: Hover zoom effect
Webflow Bit #1: Hover zoom effect

Webflow Bit #1: Hover zoom effect

Webflow Bit #1: Hover zoom effect

Design
By
Nelson Abalos Jr
,
,
Read article
How Turtle powers its website with Typeform and Webflow
How Turtle powers its website with Typeform and Webflow

How Turtle powers its website with Typeform and Webflow

How Turtle powers its website with Typeform and Webflow

Inspiration
By
Omid Ghiam
,
,
Read article

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.