Photography Website Concept

A photography-inspired website layout with an expanding stack slider and a background image tilt effect.


View demo Download source

Today we’d like to share an idea for a photography website layout with you. The concept is based on a slider of several photo stacks using Flickity and once a stack is opened, it slides up and reveals its content. The background image will react to the mouse movement, creating a tilt-like motion illusion inspired by the effect seen on The DNA project, the interactive album site by j.viewz. Once a stack is opened, the background image will transform into a small, logo-like circle and move up. This effect is inspired by Alexey Oksanchenko’s animated Dribbble shot of a profile image animation.

Please note that this is very experimental and made to work with modern browsers. IE does not deal well with viewport units which we are using in some transforms, so you might not see the sliding effect of the content.

We are using Flickity by David DeSandro under the terms of the GNU GPL license v3.

Please note that if you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Flickity Commercial License at

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Flickity under the terms of the GPLv3. Read more about Flickity’s license.

The camera icons are made by Freepik from and they are licensed under CC BY 3.0

Have look at some screenshots. This is the initial view with the photo stacks shown as a slider. The slider will be shown after all images are loaded.


When moving the mouse, a semi-transparent copy of the background image will tilt according to the mouse position, creating a fun effect:


When a stack is opened, the content shows by sliding up all items with a subtle transition:


The main background image is by Paweł Kadysz from tookapic.

We really hope you enjoy this layout and find it inspiring.

View demo Download source


Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by


Related Articles

Feedback 38

  1. 3

    Thank you! Amazing concept! I think one little detail would make it even better in terms of UX-consistency: I quickly grasped the concept of dragging the image navigation at the bottom. But once it was opened I tried to drag the images as well – which doesn’t work because I have to scroll the standard way. I think it would be nicer to make it draggable, too. Just my humble opinion.

  2. 5

    Thanks Codrops! Beautiful concept.

    And now… go to next stage. Your ideas realized at the full-featured e-commerce template Photographer (russian version).

    We added all basic pages and the style adapted to a CMYK-like palette.

    • 6

      Hi Impera, we would love to use your CMS but everything is in Russian. Will you make an English one soon?

  3. 10

    Nice UI.

    Would be cool if this navigation was appearing at the bottom of each stack, making it continuous browsing without having to go back to home page.

  4. 12

    Thanks for the inspiring layout. I played with the demo a little bit and their was definitely a lot of incentive for me to click a lot :). For ecommerce sites and small businesses, this could definitely be a new and exciting way to create a compelling call-to-action. Keep up the great work!

  5. 14

    How do you enable the ability in main.js to click on the image below the stack-title ALONG with the stack-title to enable the full view mode on each stack?

    It is very unintuitive to have to click on ONLY the title itself to enable the full view mode. People seem to have an issue navigating on a large touch screen with their index finger.

    var titleEl = stack.querySelector('.stack-title');

    If I set the class to ‘.stack-title, .item’ only the .stack-title is clickable because it is first item in the document. If you just set it to .item you’re not able to click on the titles.

  6. 16

    Thanks for this. Just want to add some ideas in accordance with the design. Just make sure your webpages aren’t too long. You only get one chance to make a first impression, and if your most important content is “below the fold,” it may not even be read. If you have a lot of related content that needs to stay together, consider breaking it up into sections and adding links to each section.

  7. 18

    Hello all, kisses to Mary!

    I have implement this idea in a WordPress theme and tried to include function for arrows on opened item so visitor can go to next or previous item without need to first close item. I achieve that with :
    flkty = new Flickity(stacksWrapper, {
    prevNextButtons: true

    But the issue is when you click on next or previous button and go to new item body height says from the first item opened.

    If anyone have solution please share, I am building that site for my love!

    Thank you all!

Follow this discussion

Leave a Comment