Coursera Plus Annual is 40% Off — Ends June 29.

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

YouTube

Creating a Diamond Grid with CSS and Animation

Kevin Powell via YouTube

Start learning Write review
DataCamp Ad

Power BI Fundamentals - Create visualizations and dashboards from scratch

Learn More → Unihackers Ad

Launch Your Cybersecurity Career in 6 Months

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
Learn how to create an eye-catching diamond grid using CSS and add a bonus animation in this informative tutorial. Explore techniques for offsetting rows, shaping diamonds, and implementing clip-path animations. Master z-index tricks to control element layering and discover how to achieve smooth fade-out effects on hover. Follow along to enhance your CSS skills and create visually stunning web designs with dynamic diamond grids.

Syllabus

- Introduction
- Creating the grid
- Offsetting the middle row
- Creating the diamond shape
- Fitting them closer together
- Animating the clip-path
- Failed attempt to keep the round corners on hover
- The z-index “hack” to keep items in front
- Making the elements fade out on hover
- Fixing the rounder corners on hover

Taught by

Kevin Powell

Reviews

Start your review of Creating a Diamond Grid with CSS and Animation

Start learning

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.