YoVDO

Creating a Cool Bubble Zoom Effect with CSS

Offered By: Kevin Powell via YouTube

Tags

Computer Science Courses Web Development Courses Web Design Courses Animation Courses HTML Courses Hover Effects Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
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 Skills
Udemy
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