David Walsh's Angry Birds vs Kseso

Una pequeña variación a un ejemplo de David Walsh

by kseso

HTML

<ul class="item">
        <li class="item-billboard">
            <h3>
                <img src="http://davidwalsh.name/dw-content/abirds.jpg" alt="@" />                
                David Walsh's Angry Birds vs Kseso
      </h3>                
            <a class="item-detail" href="#">
        All in 1 ul.<br />
                 With "ease" &amp; little negative delay (-.04s)<br />
            </a>
        </li>
    
        <li class="item-billboard">
            <h3>
                <img src="http://davidwalsh.name/dw-content/abirds.jpg" alt="@" />                
                David Walsh's Angry Birds vs Kseso
      </h3>                
            <a class="item-detail" href="#">
        With "ease-in-out" &amp; no delay.<br />
                Less and more semantic markup.<br />
        I don´t like things like &lt;a>&lt;div />&lt;/ a>
            </a>
        </li>
    </ul>

CSS

* {margin:0; padding:0; border: none; position: relative;}
ul {list-style-type: none;}
.item {
    border: 1px solid #CCCCCC;
    margin: 10px auto;
    width: 510px;
    overflow: hidden;
}    
.item-billboard {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    display: inline-block;
    height: 180px;
    margin: 5px;
    overflow: hidden;
    padding: 10px;
    width: 220px;
    border-radius:5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) inset;
}
.item-billboard * {
     -webkit-transition: margin-top .5s -.04s;
     -moz-transition: margin-top .5s -.04s;
     -o-transition: margin-top .5s -.04s;
     -ms-transition: margin-top .5s -.04s;
      transition: margin-top .5s -.04s;
 }
.item-billboard:nth-child(2n) * {
     -webkit-transition: margin-top .5s ease-in-out;
     -moz-transition: margin-top .5s ease-in-out;
     -o-transition: margin-top .5s ease-in-out;
     -ms-transition: margin-top .5s ease-in-out;
      transition: margin-top .5s ease-in-out;
}
.item li:hover h3 {
     margin-top: -200px;
 }
.item h3 {
    color: #262626;
    font-family: "Open Sans",arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 100%;
    margin: 0 0 20px;
    text-align: center; 
  }    
.item-detail {
    background: #ececec;
    color: #000000;
    display: block;
    height: 180px;
    text-decoration: none;
    }