Learn how to recreate a fun CSS effect from CSS Day using modern techniques in this 26-minute tutorial video. Explore advanced grid layouts, image positioning, and hover effects as you build an interactive image gallery. Follow along step-by-step to set up the HTML structure, create a responsive grid, style images, and implement smooth transitions. Discover solutions for common issues like hover state management and max-width constraints. Perfect for web developers looking to enhance their CSS skills with practical, cutting-edge design techniques.
Overview
Syllabus
- Introduction
- The HTML
- Basic CSS to set the stage
- Moving the images to a different grid column than their parent
- Creating the final grid
- Positioning our images on the grid
- Styling the images
- Adding the hover effect
- Fixing an issue when we stop hovering on an image
- Fixing a potential issue with max-width
Taught by
Kevin Powell
