Please consider subscribing to the YouTube Channel!
Here are a few of the CSS tips & tricks I use in the video to pull off the gallery.
- CSS Grid Template Columns - To create a 6 column grid
- CSS Grid Template Auto Rows - To create alternating height auto rows for visual interest
- CSS Animations - To create a 'label' that animates down into view on gallery hover
- CSS Transforms - To create a 'zoom effect' when hovering on an image thumbnail
- CSS Grid Spans - To make it super easy to have images span arbitrary columns and rows
- CSS Object Fit - To make the thumbnails stay centered when resizing the viewport
- CSS Backdrop Filter - To create some fancy effects (blur & saturation) behind the label when it animates into view (won't work in Firefox)
- CSS Media Query - 2 liner to make a mobile view flow into a single column