Create an animated text overlay on an image on hover

Build a common interaction design in 5 simple steps.

Mat Vogels
November 16, 2015
Tutorials

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!

There can be many reasons for a website to exist

I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.

left the tomatoes gif
There’s a reason why the tomatoes are on the plate. But how could you know that?

I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.

guy gif

That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.

Personality disconnect

Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex. 

Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be. 

Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.

girls dancing gif
Take it all in people.

If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience. 

For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation. 

Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list. 

Try not to be on the receiving end of this.

The ones who will make it to the other side are the ones who dared to be different

Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.

The truth is, brands willing to take risks will always come out on top.

So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”

But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple: 

Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.

As you were.

Mat Vogels

I'm a web creator and Webflow evangelist. Follow me @matvogels.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.