Above & Beneath: Featured Content Layout Effect

A landing page template with a featured content section and background sounds that change according to the view.

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today we’d like to share a little aquatic landing page template with some special effects with you. The idea is to show a big headline in the initial view and when a grid/menu icon is clicked, the view slides down (below the water) and some featured content or menu items get shown. The transitions are accompanied by some fitting background sounds.

Attention: We are using some newer CSS properties that won’t work in older browsers (relative viewport units, CSS animations)

We are using CSS transitions and animations that are controlled by classes that we apply to the main container. Have a look at the three different demos (turn your sound on or tap anywhere if you are on mobile iOS):







Blue Divers



We hope you enjoy this little template and find it useful!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.


Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 42

Comments are closed.
  1. This is, like every other template and work from Mary, absolutely fantastic! So. Much. Talent.

  2. Cool! There is something wrong(demo 2 and 3) with the sound before you click the grid button, there is that constant buzzing sound on Google Chrome. I am using the latest version of that browser(as of this writing). I have check the demos on Firefox, everything is perfect there.

  3. hi there.

    THIS IS BEAUTIFUL. is there any way to link the headline with the underwater section? so if I click on the headeline I´d be taken to the lower section (just like if I clicked on the ‘grid’icon)?

    thanks and greetings, michael