Weblog Archive Idea

by lovromar

HTML

<ul>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/02/Pure-CSS-Icons1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/02/Why-You-Should-Use-Inline-Block-when-Positioning-Elements1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/02/A-Collection-of-CSS-Snippets-for-Sublime-Text-21-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/01/How-I-Make-a-Halftone-Effect-in-Illustrator1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/01/Getting-Inner-Border-Radius-Just-Right1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/01/Add-Borders-to-Your-Triangles-Using-Pseudo-elements1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2012/01/Instagram-and-Friends1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/11/How-to-Make-a-Pure-CSS-Alert-Bar1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/10/CSS-Animation-Tips-and-Tricks1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/10/How-to-Make-a-CSS-Speech-Bubble-With-a-Drop-Shadow1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/10/Steven-Paul-Jobs-A-Brief-Timeline1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/09/HSLa-Are-You-Using-It-Here-is-Why-I-Think-You-Should-Be1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/09/The-Value-%E2%80%98Transparent%E2%80%99-Isnt-as-Transparent-as-You-Might-Think-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/08/Improve-Readability-with-Columns1-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/08/Improving-the-Box-Model-with-box-sizing-238x108.png"></li>
    <li><img src="http://joshnh.com/wp-content/uploads/2011/08/How-to-Set-Up-a-Baseline-Grid1-238x108.png"></li>
  ...

CSS

ul {
    font-size: 0;
    margin: 72px auto;
    width: 744px;
}
li {
    display: inline-block;
    height: 108px;
    margin: 5px;
    position: relative;
    width: 238px;
    -webkit-transition: .25s;
       -moz-transition: .25s;
        -ms-transition: .25s;
         -o-transition: .25s;
            transition: .25s;
}
li:nth-child(4n - 3) {
    background-color: #6cf;
}
li:nth-child(4n - 2) {
    background-color: #fc6;
}
li:nth-child(4n - 1) {
    background-color: #f66;
}
li:nth-child(4n) {
    background-color: #555;
}
ul:hover li {
    background-color: #eee;
}
li:hover:nth-child(4n - 3) {
    background-color: #6cf;
}
li:hover:nth-child(4n - 2) {
    background-color: #fc6;
}
li:hover:nth-child(4n - 1) {
    background-color: #f66;
}
li:hover:nth-child(4n) {
    background-color: #555;
}
img {
    position: absolute;
}