<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" & 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" & no delay.<br /> Less and more semantic markup.<br /> I donĀ“t like things like <a><div /></ a> </a> </li> </ul>
* {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; }