Creating a Diamond Grid with CSS and Animation

Creating a Diamond Grid with CSS and Animation

Kevin Powell via YouTube Direct link

- Introduction

1 of 10

1 of 10

- Introduction

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Creating a Diamond Grid with CSS and Animation

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - Creating the grid
  3. 3 - Offsetting the middle row
  4. 4 - Creating the diamond shape
  5. 5 - Fitting them closer together
  6. 6 - Animating the clip-path
  7. 7 - Failed attempt to keep the round corners on hover
  8. 8 - The z-index “hack” to keep items in front
  9. 9 - Making the elements fade out on hover
  10. 10 - Fixing the rounder corners on hover

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.