http://designshack.net/articles/css/...tephotobanner/
para un scroll de imagenes pero no puedo agregarles link, hao esto y no funciona que puede ser?
Código:
  
<div id="container"> <div class="photobanner"> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=1"> <img src="wp-content/themes/brownaldia/img/01.jpg" class="first"></a> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=2"><img src="wp-content/themes/brownaldia/img/02.jpg" ></a> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=3"><img src="wp-content/themes/brownaldia/img/03.jpg" ></a> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=3"><img src="wp-content/themes/brownaldia/img/04.jpg" ></a> <img src="wp-content/themes/brownaldia/img/05.jpg" > <img src="wp-content/themes/brownaldia/img/06.jpg" > <img src="wp-content/themes/brownaldia/img/07.jpg" > <img src="wp-content/themes/brownaldia/img/08.jpg" > <img src="wp-content/themes/brownaldia/img/09.jpg" > <img src="wp-content/themes/brownaldia/img/10.jpg" > <img src="wp-content/themes/brownaldia/img/11.jpg" > <img src="wp-content/themes/brownaldia/img/12.jpg" > <img src="wp-content/themes/brownaldia/img/01.jpg" > <img src="wp-content/themes/brownaldia/img/02.jpg" > <img src="wp-content/themes/brownaldia/img/03.jpg" > </div> </div>
css
Código:
  
 
#container {
    width: 960px;
    overflow: hidden;
    margin: 20px auto 0 auto;
    background: white;
}
/*photobanner*/
 
.photobanner {
    height: 100px;
    width: 3550px;
}
/*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;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
.photobanner {
    height: 100px;
    width: 3550px;
  
}
 
.photobanner img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
	max-width:50px;
	padding: 0 30px 0 30px;
}
 
.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
.photobanner:hover .first{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -ms-animation-play-state:paused;
    animation-play-state:paused;
}
 

