How can I create a simple image swap on mouseover element with transparent text and a colored drop shadow in Webflow?

TL;DR

Layer two images in a relatively positioned div and swap their opacity on hover using interactions.
Add absolutely positioned transparent text with a visible drop shadow above the images, optionally animating it to appear on hover.

You're trying to swap an image on hover while also displaying transparent text with a colored drop shadow in Webflow. Here's how to achieve this using Webflow’s native interactions and styling tools.

---

1. Setup the Image Elements

Drag a Div Block into your Webflow canvas. Give it a class (e.g., hover-image-wrap).
Inside this Div, add two Image elements:
The default image that shows normally.
The hover image that will appear on mouseover.
Give each image a class, such as default-image and hover-image.

2. Position Hover Image for Swap Effect

Select the hover-image, set these styles:
Position: Absolute
Top/Left/Right/Bottom: 0
Width/Height: 100%
Opacity: 0
Z-index: higher than the default image (e.g., 2)
Also set the hover-image to display over the default by giving the parent hover-image-wrap position: relative.

3. Apply Image Swap Interaction

Select the hover-image-wrap container.
Go to the Interactions panel, choose Mouse Hover.
For On Hover:
Target the hover-image, create an animation that sets:
- Opacity: 1
For On Hover Out:
Set the hover-image's opacity back to 0.

4. Add Transparent Text with Drop Shadow

Inside the same container hover-image-wrap, add a Text Block with your desired message.
Set these styles:
Color: White or fully transparent using rgba(255,255,255,0) if you want it to be invisible initially.
Text Shadow: Apply a colored shadow using the Text Shadow box (e.g., 2px 2px 10px rgba(255, 0, 0, 1)).
Position: Absolute (e.g., bottom center or wherever you prefer).
Make sure the text appears above the images by setting a higher Z-index (e.g., 3).

5. Reveal Text on Hover (Optional)

If you want the transparent text + shadow to become visible on hover:
Create another animation on the same hover interaction that:
- Changes text opacity to 1 (or adjust color to visible rgba or white).

---

Summary

To create an image swap on hover with transparent text and a colored drop shadow in Webflow:

Layer two images and toggle opacity via an interaction.
Use absolute positioning and z-index to control layout.
Add a text element with transparent fill color but a visible drop shadow.
Optionally, animate the text to appear on hover for added effect.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Is there a reliable custom code to remove scrollbars on all browsers for elements in a Webflow website?

How can I make a background video in Webflow play only once?

How can I add confetti to my Webflow site using CodePen and CSS?

How can I add Google AdSense to my Webflow site?

Why doesn't the Page Load Animation work when I click on the associated links in Webflow?

How can I remove the default bullets and padding from a list in Webflow?

How can I slow down an animation created with JavaScript in Webflow? I am currently using the "smooth" property for the ".scrollIntoView" function, but I want it to go slower. Is it possible to create a custom JavaScript function to achieve this?

How can Typed.js by Matt Boldt be integrated into Webflow?

How can I ensure that the video maintains its dimensions of 1920x1080 on all breakpoints in Webflow?

How do I fix a 404 error when trying to redirect from a .html version of a blog post URL to the normal version in Webflow?

How can I ensure compatibility with the latest version of jQuery in newly published Webflow sites?

Why can't I change the text color of the form field in the "white" version of the Panels template in Webflow?

What is preventing the "Current" text from changing color on the mobile version of my Webflow site when clicked?

How can I create a table in Webflow that looks good on both desktop and mobile devices?

Where can I find the code to remove the scroll bars from the overflow div boxes in Webflow?

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?