<style type="text/css">
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
/* default link and visited state to trigger :active in IE6 */
a, a:visited {color:#000;}
/* position the outer frame */
div.frame {position:relative; margin:20px auto; width:500px; height:380px; border:1px solid #000;}
/* Set up the default links for the gallery */
div.frame a, div.frame a:visited {background:#eee; text-decoration:none; position:absolute; outline:0;}
/* Set up the common image style */
div.frame a img {position:absolute; top:0; left:0; border:10px double #d00;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
/* clip the eight images into vertical strips */
div.frame a.pos1 img {clip:rect(0 70px 380px 0px); border-color:#d00;}
div.frame a.pos2 img {clip:rect(0 130px 380px 70px); border-color:#fc0;}
div.frame a.pos3 img {clip:rect(0 190px 380px 130px); border-color:#791;}
div.frame a.pos4 img {clip:rect(0 250px 380px 190px); border-color:#e52;}
div.frame a.pos5 img {clip:rect(0 310px 380px 250px); border-color:#a84;}
div.frame a.pos6 img {clip:rect(0 370px 380px 310px); border-color:#7bc;}
div.frame a.pos7 img {clip:rect(0 430px 380px 370px); border-color:#150;}
div.frame a.pos8 img {clip:rect(0  500px 380px 430px); border-color:#d71;}
/* set up the default link :active for IE */
div.frame a:active {position:absolute; top:0; left:0; background:#fff; z-index:100;}
/* unclip the image */
div.frame a:active img, div.frame a:focus img {background:#fff; clip:rect(0 510px 380px 0); z-index:100;}
</style>
<div class ="frame">
<a class ="pos1" href="#nogo" tabindex="1"><img src="hummingbird.jpg" alt="Hummingbird" title="Hummingbird"></a>
<a class ="pos2" href="#nogo" tabindex="1"><img src="sunflower.jpg" alt="Sunflower" title="Sunflower"></a>
<a class ="pos3" href="#nogo" tabindex="1"><img src="hummingbird2.jpg" alt="Hummingbird" title="Hummingbird"></a>
<a class ="pos4" href="#nogo" tabindex="1"><img src="dragonfly.jpg" alt="Dragonfly" title="Dragonfly"></a>
<a class ="pos5" href="#nogo" tabindex="1"><img src="hedgehog.jpg" alt="Hedgehog" title="Hedgehog"></a>
<a class ="pos6" href="#nogo" tabindex="1"><img src="jay.jpg" alt="Jay" title="Jay"></a>
<a class ="pos7" href="#nogo" tabindex="1"><img src="butterfly.jpg" alt="Butterfly" title="Butterfly"></a>
<a class ="pos8" href="#nogo" tabindex="1"><img src="crane.jpg" alt="Crane" title="Crane"></a>
</div>