Putting CSS Clip to Work: Expanding Overlay Effect

Create a simple expanding overlay effect using the CSS clip property

The previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today Mary Lou wants to explore the practical side of it a little bit more. She is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay. She wants to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element.


Mary Lou will use an unordered list for the boxes. Each list item will have an icon class and an optional “span” class that will control the width of the box. Inside she’ll add some text and the overlay division. The overlay will contain a structure that will have a column layout. Since she chooses a dummy weather app as our theme, she will be showing a weather forecast for the next seven days. Each of the “day” columns will have some spans which she’ll use for the weekdays, the weather icon and the temperature. The unordered list will be centered in its parent and she’ll remove the list style.


February 10, 2016 by User

You must me logged in to write a comment.