Close stacked expanding hovers: Original

Just using the hover state but to prove the cursor gets confused on the expanding hover.

by paullferguson

HTML

<ul>
    <li><a href="#"title="DAN MALL">DAN MALL</a></li>
    <li><a href="#"title="NAOMI ATKINSON"> NAOMI ATKINSON</a></li>
    <li><a href="#"title="TRAVIS SCHMEISSER"> TRAVIS SCHMEISSER</a></li>
    <li><a href="#"title="TRENT WALTON"> TRENT WALTON</a></li>
    <li><a href="#"title="ROBBIE MANSON"> ROBBIE MANSON</a></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Six+Caps);

ul {
    padding: 20px;
}

li:nth-child(2n) {
    background: #DDD;
}

li {
    position: relative;
    top: 0;
    left: 0;
    height: 31px;
}

a {
    font: 40px/31px sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 31px;
    opacity: 0.5;
    color: #000;
    text-decoration: none;
}

a:hover {
    font: 60px/51px sans-serif;
    opacity: 1;
    top: -34%;
    z-index: 10;
}