<?xml version="1.0" encoding="utf-8"?>
Uxcel
Pro MembershipFor TeamsHelp
Log inSign up

Interactive Hover

Subham Saurabh
Subham Saurabh
Edited
Interactive Hover
Open full project

In one of my projects, I created a unique card flip interaction inspired by Apple’s WWDC 2024. This interaction features a visually engaging card flip with a glowing cursor effect that activates on hover, enhancing the user experience with subtle yet dynamic motion. Additionally, a realistic flip sound was integrated to provide an immersive, tactile feel whenever a user clicks to reveal the card’s reverse side. Designed solely on Figma, this project allowed me to explore the boundaries of interaction design within a minimalist interface, bringing together visual appeal and interactivity in a seamless experience.

Disclaimer: While this version performs optimally on desktop, the absence of hover functionality on mobile devices means that mobile users may not experience the interaction in its full intended form.

Tools used

Figma

Topics

UI DesignMicrointeractionsHIG

Share

Share your insights — leave a project review and help others grow their skills

Reviews

6 reviews

Cristian Georgescu

Cristian Georgescu

Mentor
UX/UI Designer 104 reviews

Thanks for your sub, Subham!

I love the experience on the desktop! you should make a tutorial of how to make an astonishing hovering effect like this!

You could think on mobile that you could access the gyroscope and create the same effect. I don't know how this technically works, but might be an amazing idea.

Great vibes only!

Dankwah Desmond Ankomah

Dankwah Desmond Ankomah

Mentor
Web Designer 103 reviews

This is a super cool interaction that you've recreated in Figma. I will consider animating the shadow beneath as well to add up to the realism of the entire animation.

Robert Beeton

Robert Beeton

Pro
UX/UI Designer 101 reviews

Excellent animation! Really love what you have done here! Play with shadowing a bit and it will be spot on!

10 months ago
Srdjan Despic

Srdjan Despic

Pro
Product Designer 8 reviews

I am generally curious how you made this, is there a guide you could share of something similar being created?

10 months ago
Subham Saurabh

Subham Saurabh

Pro
Visual Designer 1 review
Hey Srdjan! I appreciate your curiosity! While I don’t have a guide ready at the moment, I can definitely share a tutorial link with you soon.
9 months ago
Srdjan Despic

Srdjan Despic

Pro
Product Designer 8 reviews
Awesome, looking forward to it :)
9 months ago
Michal Kuczek

Michal Kuczek

Pro
Developer 75 reviews

This is all nice but horrible on mobile. If there was a fallback for mobile then I am all for it.

10 months ago
Subham Saurabh

Subham Saurabh

Pro
Visual Designer 1 review
Thanks Michal Kuczek, for catching that! I appreciate your attention to detail. I see now that the description should clarify how mobile users experience the design. I’ll add more details to address the mobile experience and any fallback solutions to ensure it works seamlessly across devices.
10 months ago
Bocar Diallo

Bocar Diallo

Pro
Engineer 5 reviews

Well done! Would be great to see the version with animated shadow.

10 months ago
59 Claps
Average 4.9 by 12 people
5 claps
4 claps
3 claps
2 claps
1 claps
Review project and earn 100 XP

You might also like

View all
ShopUs Microcopy
Project

ShopUs Microcopy

Shivani Limbu
Shivani Limbu
When I designed the push notification microcopy for a shopping platform, my thought process started with keeping it short, clear, and action
8
2
Accessible Signup & Login Flow [Mossy App]
Project

Accessible Signup & Login Flow [Mossy App]

Melissa Guimarães
Melissa Guimarães
A clean and accessible authentication flow designed for a SaaS platform. The project explores best practices in login, registration, and pas
11
3
Pet Haven - Responsive Landing Page
Project

Pet Haven - Responsive Landing Page

Sandeep Murmu
Sandeep Murmu
Rationale for the project - When I started designing Pet Haven’s landing page, I thought about the moments pet parents face when their furry
8
2
Mobile Banking App Design Workshop Plan
Project

Mobile Banking App Design Workshop Plan

Doaa Hamdy
Doaa Hamdy
Mobile Banking App Design Workshop PlanThis workshop plan has been crafted to guide a focused and collaborative session for a Mobile Banking
8
2
Empty State design for Educational App
Project

Empty State design for Educational App

Ziyad Sayed
Ziyad Sayed
Decision Process & RationaleI started by identifying the primary purpose of these screens: to inform the user that there’s currently no data
8
2
Customer Journey Map for a co-working space that provides an offsite workplace
Project

Customer Journey Map for a co-working space that provides an offsite workplace

Valeriia Kovalenko
Valeriia Kovalenko
7
2

Popular Courses

UX Design Foundations Course
Popular
Course

UX Design Foundations

Gene Kamenez
Gene Kamenez
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
6h
Beginner
4.8 (14.2k)
Introduction to Figma Course
Course

Introduction to Figma

Gene Kamenez
Gene Kamenez
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
5h
Beginner
4.5 (1.8k)
Design Terminology Course
Course

Design Terminology

Alesya Dzenga
Alesya Dzenga
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.
3h
Beginner
4.7 (8.7k)
<?xml version="1.0" encoding="utf-8"?>