Recreating A Sliding Hover Effect 100% In Webflow
I recently came across an article by Temani Afif on CSS Tricks that featured this cool sliding/wiping hover effect.
https://css-tricks.com/css-hover-effe...
I thought it would make for a great video to demonstrate how you can recreate this effect entirely in Webflow.
While the hover interaction is pretty simple, I wanted to make the tutorial because it gave me an opportunity to touch on additional Webflow topics, like absolute positioning and line breaking. In addition, I also discuss how to make this accessible for users with screen readers by adding an aria-hidden attribute to one of our text blocks.
Link to cloneable
https://webflow.com/made-in-webflow/w...
----------------------
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
👉 Access the world’s largest library of Figma & Webflow components
https://library.relume.io/?via=brian
---------------------------
👉The SEO Plugin for Webflow
Audit, score and optimize your website right in the Webflow designer.
https://www.semflow.com/?via=brian
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉 Podia
https://podia.sjv.io/c/2668845/127418...
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
https://untitledui.lemonsqueezy.com?aff=p27pE
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
👉 Use BRIAN99512 at checkout and get 20% OFF at FULLERMOE. Watch a demo here! https://fullermoe.com/welcome
---------------------------
#webflow #webdesign #css