From the footer of the v8 design of CSS-Tricks.
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(https://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(https://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;
}
Sweet!
Yeah Amazing! Such awesome posts from Chris!
Amazing….!
A great use of CSS, really handy cheers. Is there a way of creating the same effect using jQuery?
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
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 ?
it’s awesome but i try in IE and Opera it’s not work perfect…
can you fix the problem?
sorry for my critical….
Looks great, but I agree with Kevin…I’d like to know how to do this. :)
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.
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?
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.
Sorry to sound like a noob, what HTML would you need to go with this?
Open the demo then click F12, you could see the html from there.
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?
Nice effect. However it’s not cross-browser, so it’s destined to remain a tantalizing curiosity.
very useful CSS code. This is the code am searching for my new project.
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
It’s a tag.
Neemu I believe it’s class.
that is a tag.
uber cool….
How do I integrate this into WordPress?
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!
Hi, did you tried it in Internet Explorer? Not work even on IE 11 :(
Im allready solved problem in IE. JHust change colum-count from 4 to 2 :)
footer-boxes {
column-count:2;
}
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?
So you put this into your css document, then how do you connect it to your html page? I am confused
Perfect!
where is the html code ?