Visit Kickdrop to download for FREE

This simple expanding overlay effect code snippet leverages CSS3 and a little bit of Javascript to do it’s magic. Based on Mary Lou’s expanding overlay with CSS clipping tutorial , the overlay effect is great for revealing full-screen content – and as a result, this kind of interaction becomes a great “detail view” option or portfolio option, etc… kind of template.

Each of the containers (list elements) contain a fixed position overlay. When a user initiates that content area, we use a clip property to clip what’s within the container. Then we animate the hidden overlay content to the full width and height of the viewport. We used a bit of CSS3 and custom jQuery magic to make the fixed hidden content area scrollable and responsive. This is great for longer pieces of content and more intricate layouts.

In addition to a scrollable fixed content area, we’ve made the grid completely responsive, so you don’t have to worry about mobile or tablet displays. When a user closes the overlay, as per the “X” button on the top right, the animation is reversed and the overlaid content is hidden again.

Getting Started

The dependencies for this snippet include: Modernizr, Bootstrap 3+, and jQuery. There are a couple of custom jQuery snippets in there that are handled locally. But let’s get started with the CDN bits for our larger dependencies.

Each of the items are stored in a list. Below is an example of a single item html. You might notice the nesting is triggered by the “item-#” class. The name of the item is also triggered by a class named: “item-name”. The “item-overlay” class contains the overlay “item-content” for that particular item. This kind of nesting keeps the content together and easy to edit.

We are also able to support for full image backgrounds both for the overlay and the grid thumbnails by including the images as backgrounds in the CSS. Also, with the bootstrap-powered grid system, there are tons of possibilities for layouts.

Inside the project, you’ll also find our original SASS file. We use Bourbon for awesome, pre-built SASS mixins.

We hope that you find this code snippet useful. As always, please leave us any feedback and let us know if you use this drop, we may just feature it on Kickdrop!

License (it’s Free to use!):

Kickdrop resources can be used freely in personal websites, client projects, portfolios, or any other commercial projects. You may absolutely never take our work “as-is” and redistribute it or sell it anywhere else.
Full License | Terms Of Use