top of page
Profile picture of Kiera Carter

11.28.2022

2 min read

How I made this: The gradual hover-reveal that keeps visitors super engaged

Learn how to make a full-bleed hover interaction that proves there's more to you (and your website) than meets the eye.

A collage of three screenshots from Eileen Ahn's Editor X portfolio site, which showcase her full-bleed, gridded hover interaction.

Illustration by Anita Goldstein.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

The best portfolio websites are both personal and professional. If you need proof, just check out Ba!dum.com, an Editor X site built by Eileen Ahn, a designer based in San Francisco.


“The website is a form of self-expression more than a portfolio,” she says. “It’s how I want to be introduced on the internet.”


With this goal in mind, Ahn leaned into a gradual hover-reveal that slowly introduces fun facts about herself—where she grew up, what she studied, her favorite foods—while not-so-subtly showing off her skills as a designer. Here, as part of our How I Made This series, she shares how she did it.


A full-bleed hover interaction reveals that there's more to Ahn's site than meets the eye.


Describe your website and company.


“Ba!dum” is a silly term I came up with to define the rapid heartbeat I feel when my heart swells from excitement, something I first noticed when my best friend and I talked about collaborating on a project (which we did). It’s always nice to find heartfelt ba-dum’s in and out of creating.


The company is very muti-faceted, and the website is playful and experimental. We call ourselves a political consulting firm, but the work is better defined as social and civic organizing focused on progressive policies. We do campaign work to elect democratic candidates, advance progressive ballot measures, and advocate for social policies that align with our values.


Click to build your next portfolio on Editor X.

What was your goal in designing this website?


I wanted to have the creative agency to experiment outside of typical templates and layouts. To me, the website functions as a form of self-fulfillment and self-expression.



What’s the one design feature on your site with a major wow factor?


Definitely the hover reveal. You get to know a little bit more about me as you explore.


Got 90 seconds? Watch this screen recording to see how Ahn made a hover and reveal grid on her Editor X site—and try it on your own. Screen recording by Wix components product designer Daniel Winebush.