<html>
<head>
<script> window.console = window.console || function(t) {};</script>
<script> if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*"); }</script>
<style type="text/css">
img {width: 300px; height: 400px; transition: .3s ease-in-out;}
img:hover {opacity: 0.5;}
#box1, #box2, #box3, #box4 {width: 300px; height: 400px; -webkit-box-shadow:
0px 1px 1px; float: left;
background-repeat: no-repeat; background-position: center;}
#slideshow-container {width: 300px; position: relative; overflow: hidden;
margin: auto; margin-top: 30px; box-shadow: 0px 10px 10px #008080;
border-radius: 20px;}
#slideshow {width: 800%; -webkit-animation: slideshow 20s infinite;
-moz-animation: slideshow 20s infinite; -o-animation: slideshow 20s
infinite; -ms-animation: slideshow 20s infinite;}
@-webkit-keyframes slideshow {
0%, 10%, 100% {margin-left: 0; }
20%, 30% {margin-left: -300px; }
40%, 50% {margin-left: -600px;}
60%, 70% {margin-left: -900px;}
80% {margin-left: 0;}}
</style>
<head>
<body >
<div id="slideshow-container">
<div id="slideshow">
<div id="box1"><img src="../Bilder/hans busch 250.jpg"></div>
<div id="box2"><img src="../Bilder/Michelle pfeiffer.jpg"></div>
<div id="box3"><img src="../Bilder/Andie MacDowell.jpg"></div>
<div id="box4"><img src="../Bilder/Astern.jpg"></div>
</div>
</div>
</body>
</html>
|
