This is the full HTML and CSS code
Here is the CSS for creating a scrolling images effect.
<style>
* {margin: 0; padding: 0;}
body {
background-color: #666;
}
#container {
width:70%;
overflow: hidden;
margin: 50px auto;
background: white;
}
/* Header */
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/* Photo banner */
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: -45px;
}
/* Keyframe animations */
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
...
...
</style>
</head>
This is the HTML code:
<body>
<div id="container">
<a href="http://www.somelink.com">
<div class="photobanner">
<img class="first" src="images/Arjun_singh.jpg" alt="" />
// more images...
</div>
</a>
</div>
</body>
If possible by JavaScript or jQuery, you can send me the link.
For a quick view, check out this link: