Update CSS collections

collections/css/background-patterns.yaml

@@ -0,0 +1,14 @@
+slug: css/background-patterns
+name: CSS Background Patterns
+featured: true
+snippetIds:
+  - css/s/stripes-pattern
+  - css/s/zig-zag-pattern
+  - css/s/polka-dot-pattern
+  - css/s/checkerboard-pattern
+splash: tea-pour.png
+description: >-
+  CSS can be used to create a variety of background patterns. In this
+  collection, you'll learn how to create a few simple background patterns, such
+  as stripes, zig-zags, polka dots, and checkerboards.
+shortDescription: Learn how to create a variety of background patterns using CSS.

collections/css/button-transitions.yaml

@@ -0,0 +1,15 @@
+slug: css/button-transitions
+name: CSS Button Transitions
+featured: true
+snippetIds:
+  - css/s/button-hover-grow-animation
+  - css/s/button-hover-shrink-animation
+  - css/s/button-hover-fill-animation
+  - css/s/button-focus-swing-animation
+  - css/s/button-border-animation
+splash: plant-window.png
+description: >-
+  CSS transitions are a great way to add some life to your buttons. This snippet
+  collection covers a handful of simple yet useful animations that you can use
+  to make your buttons more interactive.
+shortDescription: Add some life to your buttons with these simple CSS transitions.

collections/css/centering.yaml

@@ -0,0 +1,17 @@
+slug: css/centering
+name: CSS Centering
+featured: true
+snippetIds:
+  - articles/s/css-centering
+  - css/s/flexbox-centering
+  - css/s/grid-centering
+  - css/s/transform-centering
+  - css/s/display-table-centering
+splash: keyboard-coffee.png
+description: >-
+  Centering content with CSS is not always straighforward. This snippet
+  collection contains a few handy tips and tricks to help you center anything
+  anywhere.
+shortDescription: >-
+  A collection of techniques for centering HTML elements in any situation using
+  CSS.

collections/css/hover-effects.yaml

@@ -0,0 +1,20 @@
+slug: css/hover-effects
+name: CSS Hover Effects
+featured: true
+snippetIds:
+  - css/s/image-overlay-hover
+  - css/s/image-hover-menu
+  - css/s/hover-additional-content
+  - css/s/image-hover-rotate
+  - css/s/rotating-card
+  - css/s/hover-perspective
+  - css/s/hover-underline-animation
+  - css/s/popout-menu
+  - css/s/navigation-list-item-hover-and-focus-effect
+  - css/s/mouse-cursor-gradient-tracking
+splash: hand-screen.png
+description: >-
+  You can use CSS to create some pretty cool hover effects. In this collection,
+  we'll look at some popular techniques for creating hover effects to spice up
+  your next web project.
+shortDescription: A collection of cool CSS hover effects to spice up your next web project.