<style type="text/css">
ul.slideshow {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; 
height:320px; border:1px solid #ddd; background:url(pic6.jpg);}
ul.slideshow li.streak {margin-left:210px; padding-top:330px; width:70px; height:70px; 
background:url(Camera.png) no-repeat center bottom;}
ul.slideshow li.end {position:absolute; left:0; top:0; text-align:center; width:480px; padding-top:150px; 
font:bold 16px/32px arial, sans-serif; color:#fff;}
ul.slideshow li.reset {position:absolute; left:0; top:350px; text-align:center; font:bold 16px/32px arial, 
sans-serif; color:#000; display:none;}
ul.slideshow li.streak a {display:block; width:70px; height:70px;}
ul.slideshow li.streak  img {display:block; width:480px; height:320px; position:absolute; left:0; 
top:0; z-index:100; opacity:1}
ul.slideshow li.streak  img.p6 {z-index:100;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.slideshow li.streak  img.p5 {z-index:100;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.slideshow li.streak  img.p4 { z-index:100;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.slideshow li.streak img.p3 { z-index:100;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul li.streak img.p2 { z-index:100;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul li.streak img.p1 { z-index:100;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul li.streak:hover img.p6 {opacity:0; width:960px; height:640px; left:-240px; top:-640px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 2s;
-o-transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-webkit-transition-delay: 2s;
}
ul li.streak:hover img.p5 {opacity:0; width:960px; height:640px; left:-240px; top:-640px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 5s;
-o-transition-delay: 5s;
-moz-transition-delay: 5s;
-ms-transition-delay: 5s;
-webkit-transition-delay: 5s;
}
ul.slideshow li.streak:hover img.p4 {opacity:0; width:960px; height:640px; left:-240px; top:-640px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 8s;
-o-transition-delay: 8s;
-moz-transition-delay: 8s;
-ms-transition-delay: 8s;
-webkit-transition-delay: 8s;
}
ul.slideshow li.streak:hover img.p3 {opacity:0; width:960px; height:640px; left:-240px; top:-640px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 11s;
-o-transition-delay: 11s;
-moz-transition-delay: 11s;
-ms-transition-delay: 11s;
-webkit-transition-delay: 11s;
}
ul li.streak:hover img.p2 {opacity:0; width:960px; height:640px; left:-240px; top:-640px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 14s;
-o-transition-delay: 14s;
-moz-transition-delay: 14s;
-ms-transition-delay: 14s;
-webkit-transition-delay: 14s;
}
ul li.streak:hover img.p1 {opacity:0; width:960px; height:640px; left:-240px; top:-640px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 17s;
-o-transition-delay: 17s;
-moz-transition-delay: 17s;
-ms-transition-delay: 17s;
-webkit-transition-delay: 17s;
}
ul li.streak:hover {background:url(Camera2.png) no-repeat center bottom;
transition-delay: 18s;
-o-transition-delay: 18s;
-moz-transition-delay: 18s;
-ms-transition-delay: 18s;
-webkit-transition-delay: 18s;
}
ul.slideshow li.pad {display:block; width:480px; height:320px; background:url(trans.gif); position:absolute;
left:0; top:0; z-index:200;}
</style>
<!--[if IE]>
<html xmlns:t="urn:schemas-microsoft-com:time">
<style type="text/css">
.time {behavior:url(#default#time2)}
ul.slideshow li.streak:hover img.p6,
ul.slideshow li.streak:hover img.p5,
ul.slideshow li.streak:hover img.p4,
ul.slideshow li.streak:hover img.p3,
ul.slideshow li.streak:hover img.p2,
ul.slideshow li.streak:hover img.p1
{width:480px; height:320px; left:0; top:0; filter: alpha(opacity=100);}
ul.slideshow li#one img.fade1 {width:480px; height:320px; left:0; top:0; filter: alpha(opacity=0);}
</style>
<![endif]-->
<style type="text/css" media="only screen and (max-device-width: 768px)">
/* for iPhone, iPad and iPod Touch */
ul.slideshow li.reset {display:block;}
</style>
<br><br><br>
<ul class ="slideshow">
<li class ="end">End of Slideshow<br>Move mouse off the icon to reset<br>or tap 'RESET' if using the Safari Mobile Browser</li>
<li id="one" class ="streak" aria-haspopup="true"><a href="#url"></a>
<img class ="p1 time" src="pic1.jpg" alt="" begin="one.mouseenter+18" end="one.mouseleave" timeaction="class:fade1">
<img class ="p2 time" src="pic2.jpg" alt="" begin="one.mouseenter+15" end="one.mouseleave" timeaction="class:fade1">
<img class ="p3 time" src="pic3.jpg" alt="" begin="one.mouseenter+12" end="one.mouseleave" timeaction="class:fade1">
<img class ="p4 time" src="pic4.jpg" alt="" begin="one.mouseenter+9" end="one.mouseleave" timeaction="class:fade1">
<img class ="p5 time" src="pic5.jpg" alt="" begin="one.mouseenter+6" end="one.mouseleave" timeaction="class:fade1">
<img class ="p6 time" src="pic6.jpg" alt="" begin="one.mouseenter+3" end="one.mouseleave" timeaction="class:fade1">
</li>
<li class ="pad"></li>
<li class ="reset"><a href="#url">RESET</a></li>
</ul>
<br><br><br><br><br>