<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:#fff;
box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.4);
-ms-box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.4);
}
.slide img {display:inline-block; width:240px; opacity:0.5; margin:70px 0 0 0;
-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:hover {width:480px; margin-left:-60px; margin-right:-60px; margin-bottom:-80px; margin-top:0; 
position:relative; z-index:100; opacity:1;
-o-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
}
.slide .p1:hover ~ img.p21 {margin-right:-2460px;}
.slide .p2:hover ~ img.p21 {margin-right:-2220px;}
.slide .p3:hover ~ img.p21 {margin-right:-1980px;}
.slide .p4:hover ~ img.p21 {margin-right:-1740px;}
.slide .p5:hover ~ img.p21 {margin-right:-1500px;}
.slide .p6:hover ~ img.p21 {margin-right:-1260px;}
.slide .p7:hover ~ img.p21 {margin-right:-1020px;}
.slide .p8:hover ~ img.p21 {margin-right:-780px;}
.slide .p9:hover ~ img.p21 {margin-right:-540px;}
.slide .p10:hover ~ img.p21 {margin-right:-300px;}
.slide .p11:hover ~ img.p21 {margin-right:-60px;}
.slide .p12:hover ~ img.p21 {margin-right:180px;}
.slide .p13:hover ~ img.p21 {margin-right:420px;}
.slide .p14:hover ~ img.p21 {margin-right:660px;}
.slide .p15:hover ~ img.p21 {margin-right:900px;}
.slide .p16:hover ~ img.p21 {margin-right:1140px;}
.slide .p17:hover ~ img.p21 {margin-right:1380px;}
.slide .p18:hover ~ img.p21 {margin-right:1620px;}
.slide .p19:hover ~ img.p21 {margin-right:1860px;}
.slide .p20:hover ~ img.p21 {margin-right:2100px;}
.slide .p21:hover {margin-right:2280px;}
</style>
<br><br>
<div class ="window">
    <div class ="slide">
<img class ="p1" src="pic_1h.jpg" alt="" aria-haspopup="true">
<img class ="p2" src="pic_2h.jpg" alt="" aria-haspopup="true">
<img class ="p3" src="pic_3h.jpg" alt="" aria-haspopup="true">
<img class ="p4" src="pic_4h.jpg" alt="" aria-haspopup="true">
<img class ="p5" src="pic_5h.jpg" alt="" aria-haspopup="true">
<img class ="p6" src="pic_6h.jpg" alt="" aria-haspopup="true">
<img class ="p7" src="pic_7h.jpg" alt="" aria-haspopup="true">
<img class ="p8" src="pic_8h.jpg" alt="" aria-haspopup="true">
<img class ="p9" src="pic_9h.jpg" alt="" aria-haspopup="true">
<img class ="p10" src="pic_10h.jpg" alt="" aria-haspopup="true">
<img class ="p11" src="pic_11h.jpg" alt="" aria-haspopup="true">
<img class ="p12" src="pic_12h.jpg" alt="" aria-haspopup="true">
<img class ="p13" src="pic_13h.jpg" alt="" aria-haspopup="true">
<img class ="p14" src="pic_14h.jpg" alt="" aria-haspopup="true">
<img class ="p15" src="pic_15h.jpg" alt="" aria-haspopup="true">
<img class ="p16" src="pic_16h.jpg" alt="" aria-haspopup="true">
<img class ="p17" src="pic_17h.jpg" alt="" aria-haspopup="true">
<img class ="p18" src="pic_18h.jpg" alt="" aria-haspopup="true">
<img class ="p19" src="pic_19h.jpg" alt="" aria-haspopup="true">
<img class ="p20" src="pic_20h.jpg" alt="" aria-haspopup="true">
<img class ="p21" src="pic_21h.jpg" alt="" aria-haspopup="true">
    </div>
</div>
<br><br>