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

YouTube

Creating a Cool Bubble Zoom Effect with CSS

Kevin Powell via YouTube

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

Reviews

Start your review of Creating a Cool Bubble Zoom Effect with CSS

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.