Create a Tilting Card on Hover With CSS Only
Offered By: Kevin Powell via YouTube
Course Description
Overview
Learn how to create a tilting card effect on hover using only CSS in this 33-minute tutorial video. Explore selectors and CSS techniques to achieve an interactive card design without relying on JavaScript libraries. Follow along as the instructor demonstrates writing the HTML, styling the content, setting up the card wrapper, implementing mouse position trackers, and adding hover effects. Discover how to clean up and enhance the design, and learn about simplifying the process using the :has() selector. Gain practical insights into advanced CSS techniques and improve your front-end development skills.
Syllabus
- Introduction
- writing the HTML
- styling the content itself
- setting up the card wrapper
- setting up the mouse position trackers
- adding the hover
- cleaning things up and making it look better
- using :has
Taught by
Kevin Powell
Related Courses
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX