YoVDO

Cloning CSS Day Effect Using Modern CSS

Offered By: Kevin Powell via YouTube

Tags

Computer Science Courses Web Development Courses Responsive Design Courses CSS Transitions Courses Hover Effects Courses

Course Description

Overview

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

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

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