Grow your CSS skills. Land your dream job.

Last updated on:

Slide In Image Boxes

From the footer of the v8 design of CSS-Tricks.

View Demo

footer {
    clear:both;
    overflow:hidden;
    font-size:16px;
    line-height:1.3;
}
#footer-boxes {
    -moz-column-count:2;
    -moz-column-gap:10px;
    -webkit-column-count:2;
    -webkit-column-gap:10px;
    column-count:4;
    column-gap:10px;
}
.footer-box {
    margin:0 0 10px 0;
    display:inline-block;
    width:262px;
    height:140px;
    padding:15px;
    background:#e6e2df;
    color:#b2aaa4;
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    background-position:320px 50%;
    background-repeat:no-repeat;
    text-decoration: none;
}
.footer-box h5 {
    font: bold 24px Sans-Serif !important;
    text-transform:uppercase;
    font-size:38px;
    line-height:1;
    padding:0 0 10px 0;
}
.footer-box:hover h5 {
    text-shadow:0 0 4px rgba(0,0,0,0.4);
    color:white;
}
.footer-box:hover p {
    color:white;
}
.footer-box p {
    font-size:12px;
    width:175px;
    line-height:1.5;
}
.footer-box:hover {
    background-position:200px 50%;
}
#f-diw {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1288px;
}
#f-diw:hover {
    background-color:#237abe;
    background-position:186px -1288px;
}
#f-qod {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1448px;
}
#f-qod:hover {
    background-color:#37597a;
    background-position:186px -1448px;
}
#f-htmlipsum {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1608px;
}
#f-htmlipsum:hover {
    background-color:#333333;
    background-position:186px -1608px;
}
#f-qod:hover p {
    color:#adbde3;
}
#f-bookshelf {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1768px;
}
#f-bookshelf:hover {
    background-color:#ff8400;
    background-position:186px -1768px;
}
#f-html-ipsum:hover p {
    color:#fff8da;
}
#f-twitter {
    background-image:url(http://cdn.css-tricks.com/images/css-tricks.png);
    background-position:290px -1928px;
}
#f-twitter:hover {
    background-color:#4ed2fe;
    background-position:186px -1928px;
}
#f-forrst {
    background-image:url(http://cdn.css-tricks.com/images/css-tricks.png);
    background-position:290px -2088px;
}
#f-forrst:hover {
    background-color:#203f16;
    background-position:186px -2088px;
}
#f-forrst:hover p {
    color: #92c59c;
}

Comments

  1. Janne
    Permalink to comment#

    Sweet!

  2. Yeah Amazing! Such awesome posts from Chris!

  3. Amazing….!

  4. A great use of CSS, really handy cheers. Is there a way of creating the same effect using jQuery?

  5. Hi Chris,

    This effect is really great, but there’s nothing to explain how or why it works. I’m new to CSS so I find it easier to understand when the how and why is explained… If you have the time to explain roughly how this works, I’m sure we’d all be delighted to know.

    Love your site!

    - Kevin

  6. Upendra
    Permalink to comment#

    I am looking to create a horizontal flyout image list(or anything that works) there would be a bunch of images on left side of a central area, on hover over any image, some more related images should flyout towards right.
    Allowing the user to click on any image thats shown in flyout.

    Whats happening is that the images (placed inside li tags under an unordered list ) are not flying out, they continue to get vertically stacked – thus effectively keeping them hidden from view.
    Any help ?

  7. it’s awesome but i try in IE and Opera it’s not work perfect…
    can you fix the problem?
    sorry for my critical….

  8. CaptNink
    Permalink to comment#

    Looks great, but I agree with Kevin…I’d like to know how to do this. :)

  9. Wyatt
    Permalink to comment#

    Chris is using a sprite map http://www.alistapart.com/articles/sprites with the background image positioned in each div such that nothing displays. He has also set all properties to transition (in this case, the background color and position of the background image, both on hover). By changing the location on the spritemap, the image transitions into view.

  10. Evan
    Permalink to comment#

    For others who are trying to figure out how this works, the important parts are:

    First, the animation transition:
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;

    Finally, the background position change during :hover:

    #f-qod {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1448px;
    }
    #f-qod:hover {
    background-color:#37597a;
    background-position:186px -1448px;
    }

    The background position starts out 290px to the right and slides 104 px to the left when the mouse is over the element. That gives the impression that the image is cropped to fit to the right edge of the box.

    -1448px is the vertical offset in the sprite. Basically, the image used on this element is placed 1448px down from the top. The ‘overflow:hidden’ tab prevents the rest of the sprite from showing.

    If you look at the sprite map:

    http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png

    You’ll notice that the image isn’t actually cropped specifically for this element. Hence the remaining 186px left-margin offset.

    The rest is just a simple (yet classy) combination of background-color and color (text color) change during :hover.

    I’m definitely going to use this. Can we get an assessment on browser compatibility?

  11. Really cool effect. Useful in so many ways. I think it would also be very beneficial to see a tutorial of a similar effect (that includes css3 transitions) that would explain how to implement with some manner of polyfill and modernizer with yep/nope perhaps? Just a suggestion. Thanks again, really superb.

  12. Aleks
    Permalink to comment#

    Sorry to sound like a noob, what HTML would you need to go with this?

  13. Thu Nguyen
    Permalink to comment#

    Hi,

    Thanks a lot for the tutorial.

    Can you explain how the code works?

    I created a new CSS with that code, then applied it to an image but nothing happened. What is the right way to apply that effect?

  14. Q
    Permalink to comment#

    Nice effect. However it’s not cross-browser, so it’s destined to remain a tantalizing curiosity.

  15. very useful CSS code. This is the code am searching for my new project.

  16. Neemu
    Permalink to comment#

    In the start:
    footer {
    clear:both;
    overflow:hidden;
    font-size:16px;
    line-height:1.3;
    }
    doesn’t have any ‘.’ or ‘#’ so is it a class or id?

    • that refers to the tag in HTML5, because it is a native tag, you can just declare it in CSS as footer without a class or ID

  17. Neemu I believe it’s class.

  18. hardik
    Permalink to comment#

    that is a tag.

  19. Triven
    Permalink to comment#

    uber cool….

  20. Shaun
    Permalink to comment#

    How do I integrate this into WordPress?

  21. This is a good example but can you add the HTML elements? It’s very nice to see how the transitions are used in the CSS file, but a brief example of how to implement this into the HTML code would be wonderful. I think some are confused by the HTML5 footer element and how it can be used in the page itself.

    But as usual, this is another super useful tutorial that I very much appreciate. Thanks Chris! Great work and thank you for sharing with the community!

  22. Lukas
    Permalink to comment#

    Hi, did you tried it in Internet Explorer? Not work even on IE 11 :(

  23. Lukas
    Permalink to comment#

    Im allready solved problem in IE. JHust change colum-count from 4 to 2 :)

    footer-boxes {
    column-count:2;
    }

  24. Fenser
    Permalink to comment#

    I tried it..It works with my GOOGLE ver. 31.0.1650.63 but the sliding animation in IE 10 does not work…it makes it a mess and too simple animation..is there other way to fix this with IE 10 problem?

  25. Dallan
    Permalink to comment#

    So you put this into your css document, then how do you connect it to your html page? I am confused

  26. El DIX
    Permalink to comment#

    Perfect!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".