The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Trouble with controlling sliding backgrounds

  • # March 27, 2013 at 12:54 pm

    Hi all,

    I’m making a website (html5/css3) and I’ve run into something I’m not sure how to do.

    I have links down the left hand side, when you hover over the links the respective page background slides into view from the right hand side of the screen. If you click the link then it loads the page and jumps to the different background image, instead of sliding.

    How do I keep the sliding animation going if a link is clicked before the hover animation is over?


    .container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;

    .container img
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -60;

    .container li img
    position: absolute;
    top: 0;
    left: 2000px;
    z-index: -50;
    -webkit-transform: translateZ(0);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

    z-index: 600;
    bottom: 40px;
    width: 100%;
    height: 100%;


    nav h1
    padding: 20px;
    color: #ccc;
    text-align: right;
    font: 28px Georgia, Times, serif;

    z-index: 30;
    width: 100%;
    height: 100%;
    list-style: none;

    li a
    z-index: 1;
    display: block;
    padding-left: 20px;
    padding-top: 15px;
    width: 230px;
    height: 50px;
    color: #68D;
    text-decoration: none;
    font: 22px/30px Helvetica, Verdana, sans-serif;


    Any help would be very much appreciated! :)

    # March 27, 2013 at 1:05 pm

    This reply has been reported for inappropriate content.

    Can you post a simple version of your site on

    # March 27, 2013 at 1:26 pm

    >Can you post a simple version of your site on

    With working images.

    However, I’m pretty sure the answer will be javascript to handle the whole thing.

    # March 28, 2013 at 11:06 am

    Sorry about wait, thanks very much for the replies!

    here you go:

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed