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

User Experience for the Web
Open2Study
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 (رواق)