<style type="text/css">
/* this is a CSS answer to fix the hover tilde problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
.slide {width:8500px; position:absolute; height:320px; right:-2160px; text-align:right; top:20px;}
.window {width:720px; height:360px; position:relative; border:1px solid #000; margin:0 auto; 
overflow:hidden; background:#333;}
.slide img {display:inline-block; width:240px; opacity:0.5; margin:70px 0 0 0; cursor:pointer;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.slide .p7 {margin-right:0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.slide img:focus {width:480px; margin-left:-60px; margin-right:-60px; margin-bottom:-80px; 
margin-top:0; position:relative; z-index:100; opacity:1; outline:0;
-o-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}
.slide .p1:focus ~ img.p21 {margin-right:-2460px;}
.slide .p2:focus ~ img.p21 {margin-right:-2220px;}
.slide .p3:focus ~ img.p21 {margin-right:-1980px;}
.slide .p4:focus ~ img.p21 {margin-right:-1740px;}
.slide .p5:focus ~ img.p21 {margin-right:-1500px;}
.slide .p6:focus ~ img.p21 {margin-right:-1260px;}
.slide .p7:focus ~ img.p21 {margin-right:-1020px;}
.slide .p8:focus ~ img.p21 {margin-right:-780px;}
.slide .p9:focus ~ img.p21 {margin-right:-540px;}
.slide .p10:focus ~ img.p21 {margin-right:-300px;}
.slide .p11:focus ~ img.p21 {margin-right:-60px;}
.slide .p12:focus ~ img.p21 {margin-right:180px;}
.slide .p13:focus ~ img.p21 {margin-right:420px;}
.slide .p14:focus ~ img.p21 {margin-right:660px;}
.slide .p15:focus ~ img.p21 {margin-right:900px;}
.slide .p16:focus ~ img.p21 {margin-right:1140px;}
.slide .p17:focus ~ img.p21 {margin-right:1380px;}
.slide .p18:focus ~ img.p21 {margin-right:1620px;}
.slide .p19:focus ~ img.p21 {margin-right:1860px;}
.slide .p20:focus ~ img.p21 {margin-right:2100px;}
.slide .p21:focus {margin-right:2280px;}
</style>
<br><br>
<div class ="window">
    <div class ="slide">
<img class ="p1" src="pic_1h.jpg" alt="" tabindex="1">
<img class ="p2" src="pic_2h.jpg" alt="" tabindex="1">
<img class ="p3" src="pic_3h.jpg" alt="" tabindex="1">
<img class ="p4" src="pic_4h.jpg" alt="" tabindex="1">
<img class ="p5" src="pic_5h.jpg" alt="" tabindex="1">
<img class ="p6" src="pic_6h.jpg" alt="" tabindex="1">
<img class ="p7" src="pic_7h.jpg" alt="" tabindex="1">
<img class ="p8" src="pic_8h.jpg" alt="" tabindex="1">
<img class ="p9" src="pic_9h.jpg" alt="" tabindex="1">
<img class ="p10" src="pic_10h.jpg" alt="" tabindex="1">
<img class ="p11" src="pic_11h.jpg" alt="" tabindex="1">
<img class ="p12" src="pic_12h.jpg" alt="" tabindex="1">
<img class ="p13" src="pic_13h.jpg" alt="" tabindex="1">
<img class ="p14" src="pic_14h.jpg" alt="" tabindex="1">
<img class ="p15" src="pic_15h.jpg" alt="" tabindex="1">
<img class ="p16" src="pic_16h.jpg" alt="" tabindex="1">
<img class ="p17" src="pic_17h.jpg" alt="" tabindex="1">
<img class ="p18" src="pic_18h.jpg" alt="" tabindex="1">
<img class ="p19" src="pic_19h.jpg" alt="" tabindex="1">
<img class ="p20" src="pic_20h.jpg" alt="" tabindex="1">
<img class ="p21" src="pic_21h.jpg" alt="" tabindex="1">
    </div>
</div>
<br><br>