YoVDO

Create a Tilting Card on Hover With CSS Only

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses HTML Courses Hover Effects Courses

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 Service
University 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