WebAppers

/ best free open source web resources /

Shopify

Revealing Extra Content & Expanding Fullscreen Overlay

Posted · Category: Information, License Free

Hugo Giraudel offered a great overview of the CSS clip property and the rect() function. Codrops has published a tutorial: Putting CSS Clip to Work – Expanding Overlay Effect, which is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay.

The article will teach you how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element. Clicking an element will create a cut-out effect, revealing another layer that will expand.

expand-overlay-effect

Requirements: CSS
Download Link: http://tympanus.net/Tutorials/ExpandingOverlayEffect/
License: License Free

2 Comments
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons