CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.
Category Image Box with Image Zoom Effect Using Flex
While building an ecommerce website I needed a front page that really showcased the products and grabbed the potential customer's attention. Using a beautiful image with elegant category text and a smooth animation really did the trick. I've put the markup and css up on CodePen. I wrote the css in SASS.
In the process I found a great image placeholder site. Rather than placeholder.com style gray boxes, it provides nice pretty sample images. I recommend it for prototyping and placeholder image content in development. Check it out here: Lorem Picsum
Happy coding!
John
Top comments (0)