Creating a Cool Bubble Zoom Effect with CSS
Offered By: Kevin Powell via YouTube
Course Description
Overview
Learn how to create an engaging bubble zoom effect using CSS in this 19-minute tutorial video. Explore techniques for basic styling, grid creation, and animation of grid-template-columns. Master the art of scaling avatars on hover, including adjacent siblings, and fine-tune transition delays for a polished effect. Gain insights into potential code cleanup for optimal performance. Elevate your CSS skills with this step-by-step guide to crafting an impressive visual element for your web projects.
Syllabus
- Introduction
- The HTML
- Basic styling
- Creating the grid
- Animating grid-template-columns
- Scaling up the avatar we hover on
- Scaling up the next sibling
- Scaling up the preceding sibling
- Changing the transition-delay
- Potential cleaning up you might have to do
Taught by
Kevin Powell
Related Courses
User Experience for the WebOpen2Study Writing for the Web
Open2Study Web-Engineering I: Grundlagen der Web-Entwicklung
iversity Human-Computer Interaction Design
University of California, San Diego via Coursera Ruby مدخل إلى برمجة مواقع الإنترنت باستخدام لغة
Rwaq (رواق)