Zoom & Pan using (almost) only css

Hover over the zoom-control at the top of the image to "zoom in". When the directional controls show up, hover over them to pan around the image.

HTML

<ul>
    <li><a class="zoom">hover me to zoom in</a>
        <b class="nav up">up</b>
        <b class="nav down">down</b>
        <b class="nav left">left</b>
        <b class="nav right">right</b>
        <img src="http://placekitten.com/600/600"><img src="http://placekitten.com/600/600"></li>
</ul>

CSS

ul { position:relative; }
li {
    width: 300px; height: 300px;
    overflow: hidden;
    position: relative;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    color: #444;    
}
ul li img {
    top:0;
    left:0;
    opacity:0;
    -webkit-transition:all 0.5s ease-in-out;
    width: auto;
    height: auto;
    position: absolute;
    z-index: 2;
}
img:first-of-type {
    height: 100%;
    width: 100%;
    /*This is only here because the image-placeholder
      service won't let me use the same kitty twice!
    Ideally you'd have 2 different images loading -
    one compressed one, and one at a higher resolution
    (preferrably pulled in after load)*/
}
li:after {
    content: "";
    clear: both;
    display: block;
}

li img + img {
   top: -150px; left: -150px;
}

.zoom {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    background: rgba(255,255,255,0.5);
    z-index: 3;
    transition: all 0.5s ease-in-out;
}
.zoom:hover, .zoom:focus { height: 100%; width: 100%; background: rgba(255,255,255,0)}

a:hover ~ b.nav, b.nav:hover, b.nav:hover ~ b.nav,
a:focus ~ b.nav, b.nav:focus, b.nav:focus~ b.nav { opacity: 1; z-index: 3; }

b.nav:hover ~ img + img, b.nav:focus ~ img + img {
    -webkit-transition: all 2s ease-in-out;
       -moz-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
         -o-transition: all 2s ease-in-out;
            transition: all 2s ease-in-out;
}

.up:hover ~ img + img { margin-top:150px; }
.down:hover ~ img + img { margin-top:-150px; }
.left:hover ~ img + img { margin-left:150px; }
.right:hover ~ img + img { margin-left:-150px; }

.nav.hover {
    z-index: 3;
    opacity: 1;
}

.nav {
    opacity: 0;
    z-index: 1;
    position: absolute;
    -webkit-transition: 0.5s all ease-in-out 0.7s;
       -moz-transition: 0.5s all ease-in-out 0.7s;
        -ms-transition: 0.5s all ease-in-out 0.7s;
        ...