CSS3 Sliding Header Layout

Today we’d like to show you how to create a simple grid layout with a special header effect. The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. We’ll be using some techniques like Flexbox and CSS Transitions for modern browsers.