Stretch Cover Image to Browser, Lift When Scrolled

Question

So, the new Exposure site is wonderful and got me wondering how they've achieved something like this. Basically, it's a cover image that's stretched to the browser window (even if you resize), what's lovely about is that only when you scroll do you get to see the content below.

I guess you could use something like backstretch.js for the dynamically-resized image. How are they achieving the rest, though?

I've set up a pen here: http://codepen.io/realph/pen/luwdJ

Which seems to do the job, but the content is being covered when you scroll rather than falling below the cover image.

Any idea what I'm doing wrong, or any tips for achieving something like this?

Thanks in advance!

Answer 1

I think this is what your looking for and css can do the whole thing

http://codepen.io/anon/pen/rajDJ

Just add this rule to your images or image class

  img {
   width: 100%;
  }

What exposure is doing there is creating onclick modal window that contains the image but you can do that with js or jquery or there are many jquery plugins that do that.

Also to get the nice grid structure you can use a grid template. Here is one to get you started http://960.gs/