How can I overlay text on an image in Webflow while maintaining the same dimensions as the image for hover effects?

TL;DR
  • Place the image and text inside a relatively positioned container.  
  • Use an absolutely positioned overlay div with Flexbox to center text and match image dimensions.  
  • Set initial overlay opacity to 0 and adjust it with smooth transitions on hover without changing element sizes.

To overlay text on an image in Webflow and ensure the overlay matches the image dimensions (especially for hover effects), follow these structured steps.

​

1. Set Up the Parent Container

​

  • Add a Div Block to act as the image container.
  • Give it a class name, e.g., ImageWrapper.
  • Set the position to relative so child elements (like the image and overlay text) can be absolutely positioned.
  • Set fixed dimensions, or let the image define them if it's responsive.

​

2. Add the Image

​

  • Inside ImageWrapper, drag in an Image Element.
  • Set the width to 100%, height to auto (or a fixed height if required).
  • If needed, set the image’s z-index to 1 to ensure it sits below the overlay.

​

3. Add the Text Overlay

​

  • Still inside ImageWrapper, add another Div Block for the text overlay (e.g., OverlayText).
  • Set the overlay’s position to absolute, and top/left/right/bottom all to 0.
  • This makes it perfectly overlap the image.
  • Use Flexbox (on OverlayText):
  • Set display to Flex, justify and align center to center the text.
  • Add a Text Block or Heading inside this overlay div.
  • Style your text (e.g., white text, large font size, slight shadow).

​

4. Add Hover Effect

​

  • Select the ImageWrapper and go to the Hover state.
  • Add desired effects:
  • For example, change overlay background color, increase text opacity, or scale the image slightly.
  • Make sure the overlay is initially hidden or semi-transparent (e.g., opacity: 0) and becomes visible on hover (opacity: 1).
  • Apply transitions (e.g., ease-in-out for 300ms) for smooth animation.

​

5. Maintain Same Dimensions on Hover

​

  • Because the overlay is absolutely positioned within a relatively positioned parent (ImageWrapper), it will always match the parent's dimensions.
  • Do not modify height/width of child elements on hover as that could cause layout shift.

​

Summary

​

To overlay text on an image in Webflow and keep it perfectly aligned for hover effects, use a relatively positioned container with an absolutely positioned overlay div. Use Flexbox for centering text and manage hover states and opacity for effects without disturbing dimensions.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are some plug and play, customizable options to implement a searchable map in Webflow to show business partners near the user?
How can I insert a radio button into the text label in Webflow? I can't get it to look like the picture. Here is my site Read-Only: [LINK](LINK)
How can I eliminate spam emails on my website and my client websites in Webflow?
How can I create a cookie alert message with a closing button on my website's homepage using Webflow?
How can I highlight the 'current' page in Webflow CMS collection template pages for my nav-bar links? (For example, I have a page called 'case studies' that shows items from a CMS collection also called 'case studies'. When showing the CMS collection template page for each case study, I want the nav link for 'case studies' to be highlighted to indicate the user's current location on the site). Can anyone suggest a solution? Thank you.
What can I do to fix the issue with the Barba transition in my Webflow project where it requires two clicks to work properly, resulting in a buggy and messy layout on the first click?
How can I add a "Print Page" button to my website using Webflow and custom CSS to make the content print-friendly?
What is the best way to add Schema to clients' websites using Webflow, without having to export the files and manually add them to the code each time there is an update to the website?
Why does the div element in Webflow not hide on the second click?
How can I center a section in the middle of the screen when a user clicks on a in page link in Webflow?
How can I achieve the design shown in the image using Webflow?
How can I resize a background video in Webflow so that it always fits centered without cutting off the sides?
Why am I unable to edit the class in Webflow when I receive the message "The value is overridden by more specific selector"?
Can the aria-haspopup attribute be removed in the responsive menu component in Webflow? My client's hired Accessibility Audit company is requesting its removal, but it seems hardcoded. Is there a way to remove these attributes?
How can I add numbered pagination to a slider in Webflow? Thank you.
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?