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
Level Up Your CSS Animation SkillsUdemy Upgrade Your Css UI Library - Cards, Buttons, Animations etc
Udemy Design the Web: SVG Rollovers with CSS
LinkedIn Learning Mega CSS Animation Course : 30 Projects Included
Udemy Figma Tutorials
YouTube