Coursera Plus Annual is 40% Off — Ends June 29.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

CSS Card With Hover Animation and Mobile Fallback

Kevin Powell via YouTube

Start learning Write review
CodeSignal Ad

Learn Generative AI, Prompt Engineering, and LLMs for Free

Learn More → Scrimba Ad

Free courses from frontend to fullstack and AI

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
Learn how to create an animated CSS card with hover effects and mobile fallback in this comprehensive tutorial video. Explore advanced CSS techniques including the new HSL syntax, gradients, pseudo-elements, and animations. Master the art of styling buttons, timing animations, and implementing keyboard navigation. Discover how to adapt the design for mobile devices and incorporate accessibility features like prefers-reduced-motion. Enhance your CSS skills and create visually appealing, interactive card designs that work across different devices and user preferences.

Syllabus

- Introduction to the project
- The HTML
- Starting the CSS
- New HSL Syntax and gradients
- Adding the pseudo-element
- Styling the button
- Little details
- The animations
- Timing the animations
- Fixing keyboard navigation
- Making it work on mobile
- prefers-reduced-motion

Taught by

Kevin Powell

Reviews

Start your review of CSS Card With Hover Animation and Mobile Fallback

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.