expandable-project-presentation
December 31, 2014 | 133 Feedbacks

Expandable Project Presentation

A gallery of project preview images that expand on click to reveal the full case study.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

The real power of CSS Transitions is in allowing a smooth passage from point A to point B. The user is driven through the change, he is not presented with an immediate new result. It’s these extra keyframes that make it possible to create pleasent motion-like web experiences.

In this example we take advantage of CSS Transitions and Transformations, and of the background-attachment CSS property to create a “diving-in” effect and reveal additional content for each project.

Image credits: Unsplash.com.

Creating the structure

The HTML structure is an unordered list wrapped inside a <div> element. Each list item contains a div.cd-title (title and brief description) and a div.cd-project-info (additional information). The project image is set as background image of the list item ::after pseudo-element.

Adding style

On small devices, each list item has width equal to the viewport width, height equal to one-fourth of the viewport height (4 projects in our demo) and a translateX(-100%) so that it is moved outside the viewport. After the background-images are loaded (event detected in jQuery), the .is-loaded class is assigned to the list items (translateX(0)) to move them back in the viewport. CSS3 transitions has been used to achieve a smooth animation.

When user clicks one project, the .is-full-width class is assigned to the selected list item: the ::after pseudo-element height is set to 100vh (viewport units), while the .cd-project-info visibility is changed to visible.

On bigger screens, each list item has height equal to the viewport height and width equal to one-fourth of the viewport width. Besides, the background-attachment of the list items ::after pseudo-element has been set to fixed: this way the image is fixed with regard to the viewport (doesn’t move while the selected project is scrolled) and covers the entire viewport (background-size: cover).

One note: we have been using the list-item ::before pseudo-element content property to access (in the js file) the background-image url attribute (this is used to detect if the background-images have been loaded). Therefore, each time you set a new background-image for the ::after pseudo-element, you need to update the content attribute of the ::before pseudo element as well.

Events handling

We used jQuery to detect when project background-images are loaded: as soon as they are, the loop function showCaption() is called to assign the .is-loaded class to each list item.
Besides, the click event on the .cd-close and list item elements is detected to expand/close a project.

Changelog

May 25, 2015
  • Fixed bug on Chrome 43.0.2357.65
Jan 31, 2015
  • Bug fixed - Chrome background-attachment: fixed rendering issue
Jan 17, 2015
  • Added class to single project to increase specificity
Jan 10, 2015
  • Added overflow-x: hidden to div.projects-container to hide horizontal scrollbar
Dec 31, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Huy Le

    Thanks a lots. It looks awesome and I love it very much. Very helpful too. :)

  • Amir Off

    Sweet piece of code :)

  • feamoignargfaionakfj9ajfopamjv

    Demo doesn’t works?

    • Kiril

      for me as well

    • http://codyhouse.co Claudia Romano

      Working now! ;)

      • feamoignargfaionakfj9ajfopamjv

        Thanks :)

  • lsjaksdhfkdfh

    This is awesome, thanks for this. How would you go about expanding the number of projects?

    • http://codyhouse.co Claudia Romano

      Glad you liked this! :)
      If you are using sass, you can start changing the $items variable (in the partials/_variables.scss file) and setting the background image/position of the new list item in the style.scss file. Hope this helps!

  • Mirko

    Excellent work again!! May I add a little suggestion for one of the future presentations? If you google the term “ajax portfolio/grid tutorial”, there aren’t many helpful results.

    Just take a look here https://deuxhuithuit.com/en/projects/ . It doesn’t have to be that fancy, but one AJAX portfolio/grid tutorial would be great.
    Just my two cents :))

    • http://codyhouse.co Claudia Romano

      Hi Mirko, thanks for the suggestion! We’ll add it to our to-do list! :)

  • http://www.devaprise.com/ TheVirusKA

    My idea for a game ;):

    Scissors cuts paper, paper covers rock, rock crushes lizard, lizard poisons Spock, Spock smashes scissors, scissors decapitates lizard, lizard eats paper, paper disproves Spock, Spock vaporizes rock, and as it always has, rock crushes scissors.

  • Matthias Walti

    You guys continue to amaze me, very inspiring work, thank you so much. (However, you might test it again on an iPad, there is an issue with image resolution)

    • http://codyhouse.co Claudia Romano

      Hi Mattias! Glad you liked it :)
      We tested it on an iPad (iOS 8.1) and it worked fine. Which software version are you using? Thanks

      • Matthias Walti

        iOS 8.1.2, but on a non-retina device. When switching to project details, the background image’s size is *huge*, takes a lot of scrolling to get the text on screen. I hope this helps…?!

        Apart from that, I am really excited not only by the snippet, but also for the inspiration how to write proper SASS code, really helpful for me!

        • http://codyhouse.co Claudia Romano

          It’s strange because we are using a non-retina ipad too (iOS8.1.2 – last software update). We’re gonna dig into this. Thanks for the info! And great to hear it’s helping! :)

          • Matthias Walti

            BTW, the (not-updated-for-a-while) Chrome on my iPad also shows the giga image version (see screenshot)

          • Denver

            it is bug on ios and old browser with 100vh.

            Add in your style.css

            .projects-container .cd-single-project.is-full-width::after {
            height: 100%;
            height: 100vh;
            }

          • Matthias Walti

            BTW I found out that several example sites here are also affected… tympanus.net/codrops2014.
            And it does not happen on every page load, sometimes the BG files are displayed correctly. Very strange indeed…

  • Marcello

    Hi guys, for my first post, first thinks first: thank you so much for your amazing works…makes my works better than ever! There is a problem in this project in all browsers… the browser low-bar appear when you expand a project and you can move all the page left and right, isn’t it?

    • http://codyhouse.co Claudia Romano

      Hi Marcello, thanks!:)
      Try adding an overflow-x: hidden to the . projects-container and the scrolling bar should disappear.

      • Marcello

        Yeeesss!! Same solution at the same time… in order to be born a new masterwork!!! : ) with a lot of your magic ; )
        thx again

  • Milan

    Hi Claudia, you and your crew doing great job! Thaks for everything. I really like this tutorial and I wanted to use this on my new project, but I have one problem… I need to have one section above this. Please try to add something like this before to see what happens:
    .first-section { height: 100vh; background: #FFF;} when I add something like that and then click on “Project 1″ or “Project 2″ or 3 or 4 I can scroll up and see “first-section” and beside that there are some bugs… It would be great if this tutorial could work properly when there is sections above “projects”… I hope that you understand what i wanted to say, my english isn’t very good. Please try to add and styles to that class like I mentioned and you’ll see what I’m talking about. Greetings

    • http://codyhouse.co Claudia Romano

      Hi Milan, glad you like it!
      If you need to add an additional section, you may need to remove the background-attachment: fixed set for the li:after pseudo-elements (so that the image is not fixed with regard to the viewport but to its parent) and assign a position: absolute to the .cd-close . You’ll always be able to scroll up though. Hope this help!

      • Milan

        Thank you Claudia!
        I was hoping that there is some way to disable scrolling up, but nevermind, this is great as is. Keep up good work :)

  • http://designbysolutions.com Marlana Muzny

    This is sweet! The horizontal project layout is great with the effect of parallax type scrolling upon clicking. I will defiantly be playing around with this one. Thumbs up on this tutorial.

  • Recep Kütük

    I think you should really use the images of characters from Expendables movie, as background images :D

    • http://codyhouse.co/ Sebastiano Guerriero

      ahah that’s a good idea!

  • B.E.A.T

    Nice work as usual. But I would add an ‘overflow-x : hidden’ to the ‘.projects-container’ div because I have horizontal scrollbar on project page (on firefox)

  • Thomas Anderson

    Could you use this with a JQuery slider carousel?

    • http://codyhouse.co/ Sebastiano Guerriero

      Of course, we just added a very basic slider, but it should be easy to integrate any plugin you want

      • VimVanmali

        Hi Sebastiano, which slider did you use? or even better do you have an example or link to demonstrate how you got a slider to work with this?

  • zeca afonso

    I wanted to add an unordered list to one of the pages, but it doesn’t show up. I’m new to web development, so i’m not sure what the problem is. It’s related to the fact that the whole page is one big list i think? So what do i have to do in order to be able to have an ul in one of the pages*

    • http://codyhouse.co Claudia Romano

      Hi Alfonso, thanks for the heads-up, we fixed it! you can download the updated version. Cheers!

      • zeca afonso

        Thx alot :D

        • zeca afonso

          This new version appears to have a bug, at least on chrome. Even without touching the code, if i open it on chrome and click on any of the 4 projects, once i expand that project and scroll down the image bugs a bit, and a rectangle appears in the middle of the image… I don’t know how to describe the bug, but it also happens on your live demo. Tried on Firefox,opera and safari as well, and the bug only appears on Chrome… Any idea on what’s happening?

      • kinglerb

        Great Work!.. Thank you for this. I am also using list elements in the “project-info” section and it’s still not displaying on all browsers with the new update. Any ideas?

  • Tølga Esen

    @zeca afonso – it´s in the new chrome version 39.0.2171.99. Have the same troubles :(

    • zeca afonso

      yeah i figured it was a browser issue. just wanted to make sure i reported it :D

      • http://codyhouse.co Claudia Romano

        Thanks for the heads-up guys. We’re digging into this!

        • Remcoflmm

          Any update on the Chrome problem? Love the effect, but not usable in Chrome now :(. Main difference is that on other browsers the background image is fixed and the content moves over the image. Only in Chrome the image isn’t fixed and moves up with the content.

          • http://codyhouse.co Claudia Romano

            Just uploaded a new version! ;)

          • Remcoflmm

            Works brilliant :D. Thank you so much.

          • Tølga Esen

            Hi Claudia, which part of the Files is updated?

  • Tølga Esen

    P.S.: @codyhouse – awesome codes!! :)

  • Chris

    Is there a way I code save a presentation to use in offline mode on my tablets? If someone knows a way to do this I would appreciate any help.

  • http://themeforest.net/user/IG_design/portfolio?ref=IG_design IG Design

    Nice work as usual, I really like it! Is there any way to have link directly to expanded project?

    • http://www.iamaurelien.com I Am Aurélien

      UP! I need the same thing :)

  • VimVanmali

    Hi Claudia, great tutorial. Wouldn’t this work better if each project had a separate url rather then everything being loaded at once. Have you had any experience with using history.js? Please let me know if anyone has used this expandable project presentation with history.js or something similar!!

  • Narendra Mannan

    Claudia Romano : Hi, previously when I checked the demo was working fine and now its not, just thought you should know :)

    • http://codyhouse.co Claudia Romano

      Hi Narendra, thanks for the heads-up! Could you please provide more info (browser, issue..)? I’ve been testing it and it seems to work just fine. Thanks!

      • Ladislav

        Hi Claudia,

        not working for me as well: Chrome 40.0.2214.93 m on Win 7.

        Thanks!

        • http://codyhouse.co Claudia Romano

          Fixed! (you may need to clear the cache)

      • Bodhisattva Builder

        on safari here and its not working either.

      • Narendra Mannan

        Hi Claudia, sorry for the delay in replying, and not providing sufficient info. Its working flawlessly now, on Chrome and Mozilla(in which I checked before commenting). Thanks for your prompt response and some incredible design! =)

  • Arnav Puri

    Hi, can you brief me how can I add more projects to this (upto 7 I want), by let’s say horizontal scrolling?

  • Morgan Baggs

    This is awesome, I like it a lot. Only issue I have with this one, and many other code house library projects, is accessibility is non-existent.This would be awesome, if each “project” could be accessible via the keyboard (i.e. tab key) out of the box. And also ensure screen readers can interpret the “page structure” correctly too. I’m going to toy around with it. Thanks for the beautiful work – and keep it up!

    • http://codyhouse.co Claudia Romano

      Hi Morgan, glad you like them! :)
      Yes I totally agree, accessibility is something we should work on. Actually, we try to provide the ‘bare minimum’ so that it’s ‘easy’ for others to use (and improve) it! But the next step should be accessibility. Thanks for your note!

      • Morgan Baggs

        Love the quick responses! And again love all of these projects!

  • Chopster

    I have a problem after expanding the project to 8. Whenever i click on a project after the fourth one, the title disappears whenever I scroll down. It won’t fade in/out like the first four projects. How can I fix this?

    • http://codyhouse.co Claudia Romano

      Hi Chopster, if you add more projects, you should change the $items variable ( from 4 to 8 – if you’re using scss) or the list items width – desktop version – and height – mobile version (if you’re using css). Hope this helps!

  • Marco Mourão

    I’m also having trouble adding more projects. I’m using scss, I changed the variable to $items: 5; but the 5th project sits on top of the first one. Are there any extra changes I should make?

    • http://codyhouse.co Claudia Romano

      Hi Marco,
      in the scss (lines 124 and 205) you may need to add some style to the additional list item (background image for mobile/desktop version, top/left position, ..). I would suggest you to copy what we did for the nth-of-type(4) and update it with the correct images and position (use 100vw*4/$items instead of 100vw*3/$items). Hope this helps!

  • Julien Brion

    Hi,
    Fantastic work, I’m working with it and it’s great,

    Just a question, can you confirm that the $(window).scroll(function () { doesn’t work with this theme ?
    I need to use this function to add a background on my navbar after some pixels scrolled,

    Thanks by advance :-)

    • http://codyhouse.co Claudia Romano

      Use $(‘.projects-container’).scroll(function(){}) instead! It should do the trick! ;)

      • Julien Brion

        Oh my god!
        If I can say just one sentence, “Thank you so much!” :-)
        Congrats!

  • Cosmin Placinta

    Hi there,
    Great work you’ve done :)

    A quick question: I want to use this with only 2 projects, like a door to my 2 sites. When I’m clicking on the left, to open site no 1, and on the right to open site no 2. Can this be done ?
    And also, can it open the site no 1/2 like it openes now with the close image on the right top corner ? By the way, my sites are not one page site, there are photography portofolio site, with lots of images. :)

    Thank you, and once again great work! :)

    • http://codyhouse.co Claudia Romano

      Yes, you can use just 2 images! If you’re using scss, set the $items variable to 2. Otherwise, you need to change the css a bit (top, width, left and height of the 2 .cd-single-projec). Hope this helps!

  • roselaloba

    Hello from Paris, I found your project very nice and I used the basic structure to mount a website. On the local everything works well with Firefox, Safari, Chrome and Opera. But I have a bug when I put my site online. With Safari, Chrome, Opera, when I click on the link ‘cd-scroll’, the page goes back down again, but soon and suddenly I can not access the ‘cd-project-info’. Can you tell me what could be the problem? Thank you very much for your help.

  • http://danielpaguaga.com/ Daniel Paguaga

    Hello from I a made seven projects using this just fine and everything works great except on mobile were five and six get cut off and it only shows 1-4 and 7 is there a way to fix this? Thanks in advance

    • http://codyhouse.co Claudia Romano

      Hi, make sure to set a proper top value for each project in the css.

  • rjessa

    This is such a lovely design.
    Im having issues replacing the images though.
    If I replace the images that are already present, nothing shows up but a blank color.
    Is it something I’m doing wrong?
    Anyway to fix this?
    Please let me know.
    Thanks

    • http://codyhouse.co Claudia Romano

      Hi, glad you like it!
      If you change the images, make sure to update the css (you need to change both the .cd-single-project::after background-image and the .cd-single-project::before content value). Hope this helps!

  • Julian Lai Gil

    Hello! First, congrats for such an amazing work and thank you for sharing it with us.
    I have a “situation”. I’m turning the index.html into PHP and, when I load the page, it doesn’t show anything, but acts like it is working. I can click wherever I want and it reacts as it’s showing the content (I even get the Close and Scroll Down buttons), but everything is empty. Then, when I close the project, everything loads and works perfectly. I also noticed that, when you change the location of the index.html file (updating the CSS and JS location, obviously) the same happens. Any ideas on how I could fix this? Thank you in advance.

    • http://codyhouse.co Claudia Romano

      Hi Julian, glad you like it!
      The content is shown after all the bg images have been loaded (check the bgLoaded function in the main.js), And the location of the images are set in the css files as content of the .cd-single-project::before element. So you should make sure that this url is correct (and mostly that there’s no conflict between this function and your php code). Hope this helps!

    • finalelements

      Did you ever figure this out?

      • Julian Lai Gil

        Hey! Funny you just wrote this. I didn’t work on that for a while and I’m retaking it. Sadly I haven’t found a solution yet, all I could get is bringing all the opacity to 1, but it looks bad and loses some of its magic. I’m about to upload what happens and contact Caludia to see what I’m doing wrong.
        Is it happening to you? Any findings?

        • finalelements

          That is funny I did the exact same thing . I get the transition to work but the moment a project is closed i lose the transition. When the opacity is set to 0 it does not display anything until I open and close a project. I am glad I’m not the only one with this issue. If I figure out anything I will definitely post it.

          • Julian Lai Gil

            *I know that feeling, bro*
            But what do you mean you got the transition to work?

            What happens to me when I get the Opacity to 1 is the content is shown, but the text in the project container goes to the left and doesn’t have transitions nor animation; then, when I close the project, it works perfectly, text is centered, has animations and transitions, but the problem is not really solved.

          • finalelements

            I get the opening transition the moment you click on the project the slide opens displaying everything perfectly. The moment I try and close it the transition breaks. After this everything works properly, but still can’t solve the issue.

          • Julian Lai Gil

            I see… Yeah! It breaks too. But usually happens when I open it in Safari. So, this is what happens:

            Case 1: With the original one, with no modification, everything is blank and you can click as if the content was shown, you get the X to close the project and, after you do, it starts working perfectly. Is like it starts working after the first interaction.

            Case 2: All the opacity is st to 1 so the content is shown from the time you load it, but there no animation of the text and, when you click, it slides and shows the picture, but the text is aligned to the left. However, you can go to the project as if it was working. Once you close the project, it works perfectly. So, in this case, the content was forced. Also, it happens that, after you click first and the picture is shown with the text in the left, when you put the mouse over the X or the arrow, it breaks, shows the picture half the the way and blinks a little.

            So, it’s like it works good only after the first interaction, so I don’t have a clue on how to fix it, since the script seems to actually work.

          • finalelements

            I agree the script is working. I just find it very strange that it breaks when it first loads once it is in PHP. I am going to play around with it a little more today. If I can not figure it out I am just going to write my own script.

          • Julian Lai Gil

            Yeah! It is strange. It’s like there has to be an interaction first, like one step before it works.
            I’m also playing with it today, but I’m not very skilled with Jquery, so I think I’ll have to find another way to fix it. If you have any clue on this I would be very thankful.

          • finalelements

            I don’t think it has to do with the Jquery. I was able to mimic the same issue on the HTML version once I moved the img folder to a new directory and change all of the src in style.css. However, I was also able to get it to work using PHP but unable to make it work once it is uploaded to WordPress. Now I am just beating my head as to why it will not work in WordPress.

          • Julian Lai Gil

            OH! I remember I could mimic it doing the same. But how could you get it to work?You mean it works properly, with the transitions and animations?
            I remember something happened to me like that, that I got it to work but when uploaded it didn’t work, at the end, the problem was that I was using Caps for the name of one of the folders. Pretty absurd, but check if it’s your case.

          • finalelements

            Everything works once I set it up with PHP. The moment it is brought into WordPress everything Breaks. all files are exactly the same when brought over so I am lost.

          • Julian Lai Gil

            That’s weird. I fixed it just by renaming the files. You got it to work in your local server and when taken to the WordPress it breaks? Are you using your FTP manager or are uploading from WordPress?

          • finalelements

            So your’s is working? Everything has been on my local machine.

          • Julian Lai Gil

            No, mine is not working yet. I still haven’t been able to figure ir out, but what is exactly happening to you happened to me with another thing not long ago.

          • Julian Lai Gil

            Hey! Did you figure it out? I’m still trying to make it work and am getting very frustrated.

          • finalelements

            Hey! Not yet I had to put it on hold this week. Would like to get to it next week so I can finally sleep at night again hahaha. It has to be something stupid that I am missing.

          • Julian Lai Gil

            I know. I keep thinking about it too. But I’m trying it directly on WordPress and haven’t gotten any advance. Maybe I should do what you did and try to make the php work first to see some progress…

          • Julian Lai Gil

            I finally did it! It seems the conflict is with the bgLoaded function the first time the page is loaded, so I just removed it, replaced it for a showCaption at the very beginning and added a loader in case the images take too long to load. It works perfect for me. I hope it works for you.

          • finalelements

            That is great news. I have not had a chance to work on it yet. Do you think you can email me a screenshot of what you did?

          • Julian Lai Gil

            Sure. What is it?

          • finalelements

            info(at)finalelements(dot)com Thank you so much

          • HumanV3

            I’m wondering if you can also send me a brief explanation of what you did there? :) I’m glad you guys kept an interest in this because it is a very nice layout.

          • Julian Lai Gil

            Hey! Just uploaded the answer to my first comment so everyone can see what I did. I hope it works for you too.

          • Mark

            Did you get this working?

          • Julian Lai Gil

            Hey, mark! Yes. Are you facing the same problem?

          • Mark

            I am, were you able to get it to work?

          • Julian Lai Gil

            Please check my first comment. I replied with the answer.

          • Mark

            So sorry, I read these as I waie up :) I am really struggling. Could I humbly ask for a copy to see what you did? Prodctboi at Gmail dot com

          • Julian Lai Gil

            Hi, Mark. The problem is I don’t think I still have that file. But if I have a chance to look for it tonight I’ll definitely do it.

          • Mark

            You are a legend thanks! I will post any work or tweaks I do here for you… I aim to turn this into a usable plugin.

          • Julian Lai Gil

            Hey, man! Found the file, but I don´t think your email is correct.

          • Mark

            Ah sorry. productboi at Gmail.com

          • finalelements

            I just did another test but with the full demo version not my customized one and I am getting what you mentioned. http://test.finalelements.com

    • Julian Lai Gil

      — Solved —
      It seems the conflict with PHP is with the bgLoaded function the first time the page is loaded, so I just removed it and replaced it for a showCaption at the very beginning. See the image to get an idea.

  • Tracer Bullet

    Thanks for this, it’s really fun to play with.

    I’m way out of my depths, but could you offer any suggestions on resizing the vertical height of these cells? Fixed height would be okay, I’m just trying to play with using 2 cells on the bottom half of a single page and obviously just changing the height attribute of the creates all kinds of problems. Could you offer some tips where to start, or would it be more trouble than it’s worth being a total amateur?

    • http://codyhouse.co Claudia Romano

      Hi Rubber, glad you like it!
      You should change the height, but also the top position of the element (for the bottom ones, top: 50vh instead of 0). For the opening animation, you may need to change also the height of the project (from 50vh to 100vh – inside the .is-full-width class, adding also a transition to the height). Hope this helps!

      • Rubber Bertrand

        I’ll give it a go! Thank you for your help.

      • Rubber Bertrand

        Hey Claudia, I was able to do it with your advice.

        I’m now trying a title page above the presentation boxes but if the user scrolls halfway between the full screen pages and clicks a project, the animation gets weird. Is it possible to stretch the open project across all pages on the site or does this only work if the user is locked on a 100vh element? Hope I’m explaining that clearly.

  • Onyekachi Oluchukwu Amadi

    Hello Claudia!

    I really am lost with editing this via css to 2 projects but I can’t figure it out! Any tips? Love this btw using this for a website I’m making for my friend!

    • http://codyhouse.co Claudia Romano

      Hi, glad to hear that. You should try changing the height (mobile version)/width (desktop version) of the .cd-single-project list items (50% instead of 25%) and their top (mobile version)/left (desktop version). Hope this helps!

  • Mohamad Ali Murtopo

    Hello..

    I’m trying to use a logo instead an image, and i kinda stuck when trying to make the logo surrounding the title when i hover the project, and the logo will go to center-top when i click the project, any tips? lovely work btw

  • http://1ghavami.ir ‫محمد حسین قوامی‬‎

    hi
    i use this code with http://codyhouse.co/gem/animated-page-transition-2/
    but
    first don’t show anything, and need to refresh the page
    see in page projects: http://1ghavami.ir/1ghavami/

  • Ajmla khan

    Your are Awesome! Hy can i use your code for any commercial project?

  • Usama Albghdadi

    thanks for this, it’s really amazing !
    but i have a problem: the images and the texts doesn’t shown at the first time i open the page so i have to click on blank first than close the presentation to see them..
    any advice ?

  • Victory Matibiri

    Thanks claudia! God bless you for this epic work

  • Francisco Ortuño

    When the page load first time, the animations not load :(, can you help me?

  • Francisco Ortuño

    When I click on a position of screen and close de modal, the animation looks good

  • baldrati

    Hi. Awesome job. Do you know how I can create a fixed element inside each project? I want to create a sticky nav on each project but it ain’t sticking. Thanks.

  • Frans

    Hello Claudia, all,

    Having spent several weeks with these great templates, I admit to needing help. I combined “Expandable Project Presentation” with “Alternate Fixed & Scroll Backgrounds”. The EPP is a block inside a scrolling-bg container of EF&SB. I modified the template to show 8 projects (2 rows of 4). So far so good.

    1) The EPP template uses a header (in my case responsive). The height of the projects block is calculated based on screen height and header height. So far so good. When selecting “PROJECTS” links to the top of the 8 projects block, yet they are positioned in overlap with the header. On small screens (phone) the first project is covered.

    2) With the projects embedded in the EF&SB template, the site is now a sandwich of scrollable elements. This has a tendency to become messy. I integrated two stop-gap remedies: the closing X is vertically centered, so it remains in view; selecting “PROJECTS” closes the active project.

    Is it possible to achieve the following:
    When selecting “PROJECTS”, the block of 8 projects stops at the correct point on the screen below the header, and/or,
    once a project is selected, its viewport is fixed in the right position below the header, stopping any scrolling response outside the project area (header), and,
    when reaching the bottom of the selected project text, the next section will not pull up.

    I hope this all makes sense. Here a mockup: http://thespacefactory.net/codyhouse-temp

    Thanks in advance for any thoughts you’d like to share!

  • finalelements

    I tried incorporating this into wordpress but it does not seem to work. When first seeing the page the images and titles are hidden, but the links are still working. The moment I click on one of the projects the animation happens but it only displays the close button and arrow. Once I click the close button the images are present but the hover effect is no longer working. What may be causing this?

  • Nicolas Comte

    Hello Claudia I try to incorporate this beautiful plugin in my website but i can’t show pictures small or large
    , i have just project 1 2 3 4 but no hover images,
    everything is Ok in the console, can you help me please ?

  • Nicolas Comte

    It found my image but on hover it don’t show them, I don’t know why, please help me :)

  • Zoë Brugman

    Hello Claudia, I want 5 projects but i don’t know how? Can you please help me? Gr.

    • Denver

      find in style.css min-width: 1024px {} and change
      .projects-container .cd-single-project {
      width: 20vw;}

      cd-single-project:nth-of-type(2) {
      left: 20vw;}
      .cd-single-project:nth-of-type(3) {
      left: 40vw;}

      .cd-single-project:nth-of-type(4) {
      left: 60vw;}
      .cd-single-project:nth-of-type(5) {
      left: 80vw;}
      and create css for
      .cd-single-project:nth-of-type(5)
      .cd-single-project:nth-of-type(5)::before
      .cd-single-project:nth-of-type(5)::after

      on mobile change top in css .cd-single-project

      • Zoë Brugman

        This part i understand:

        cd-single-project:nth-of-type(2) {
        left: 20vw;}
        .cd-single-project:nth-of-type(3) {
        left: 40vw;}

        .cd-single-project:nth-of-type(4) {
        left: 60vw;}
        .cd-single-project:nth-of-type(5) {
        left: 80vw;}

        The remaining points are not entirely clear to me.
        Can you explain it more clearly?

        Anyway, thanks for helping

  • Mendoza De Marco Giusto

    Hello…in Firefox 12 it doesn’t work. Someone has fixed this bug?
    Thanks :)

  • Constantine Gauvoronskiy

    Hi, I don’t get … How to change the css in order template to have only two projects ?

    • http://www.brinfosolutions.in/ Em Ji Madhu

      just change height property to 50vh on mobile and width property to 50vh for desktop.