Untitled

<!-- 

  Autor: Marco Barría

  Slider pure css, mejorado y ordenado

-->

<section id="contenedor">

  <!-- thumbnail -->

  <div class="mini"><img src="http://fix.cl/test/slider/slider1_prev.jpg" alt="" height="50" width="150"></div>

  <div class="mini"><img src="http://fix.cl/test/slider/slider2_prev.jpg" alt="" height="50" width="150"></div>

  <div class="mini"><img src="http://fix.cl/test/slider/slider3_prev.jpg" alt="" height="50" width="150"></div>

  <div class="mini"><img src="http://fix.cl/test/slider/slider4_prev.jpg" alt="" height="50" width="150"></div>

  <!-- images -->

  <ul id="slider">

    <li>

      <div><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>

      <img src="http://fix.cl/test/slider/slider1.jpg" alt="" height="200" width="600">

    </li>

    <li>

      <div><p>Ipsum slider</p></div>

      <img src="http://fix.cl/test/slider/slider2.jpg" alt="" height="200" width="600">

    </li>

    <li>

      <div><p>Ipsum slider</p></div>

      <img src="http://fix.cl/test/slider/slider3.jpg" alt="" height="200" width="600">

    </li>

    <li>

      <div><p>Ipsum slider</p></div>

      <img src="http://fix.cl/test/slider/slider4.jpg" alt="" height="200" width="600">

    </li>

  </ul> 

</section>

html, body{min-height:100%;}

body{

  font: 62.5% "Helvetica Neue", Helvetica, Geneva, sans-serif;

  background: rgb(50,50,50);

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUCB1jUlGRkWH6CQRMf//y8oJZAFUaCmUwcfODAAAAAElFTkSuQmCC);

  background-repeat: repeat;

}

ul{

  margin: 0;

  padding: 0;

}

/**********************************************

  wrapper

**********************************************/

#contenedor{

  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);

  margin: 60px auto 0 auto;

  position: relative;

  overflow:hidden;

  width:600px;

  height: 250px;

}

/**********************************************

  thumbnail

**********************************************/

.mini{

  -webkit-filter: grayscale(100%);

  cursor: ew-resize;

  float: left;

  margin-top: 200px;

  width: 25%;

}

.mini:hover{

  transform:scale(.98);

  -webkit-filter: grayscale(0%);

}

#contenedor div:nth-child(1):hover ~ #slider{

  margin-left: 0px;

  -webkit-filter: grayscale(0%);

}

#contenedor div:nth-child(2):hover ~ #slider{

  margin-left: -600px;

  -webkit-filter: grayscale(0%);

}

#contenedor div:nth-child(3):hover ~ #slider{

  margin-left: -1200px;

  -webkit-filter: grayscale(0%);

}

#contenedor div:nth-child(4):hover ~ #slider{

  margin-left: -1800px;

  -webkit-filter: grayscale(0%);

}

/**********************************************

  images large

**********************************************/

#slider{

  width: 2400px; /* *600px la dimension de la imagen */

  height: 200px;

  position: absolute; 

  transition: margin-left .7s cubic-bezier(.45, 0, .60, 1);

  -webkit-filter: grayscale(100%); /* funciona correctamente en Chrome y safari 6 solo webKit */

}

#slider div{

  background: rgba(0,0,0,.5);

  position: absolute;

  padding: 5px;

  top: 180px;

  left: 0px;

  width: 100%;

  height: 10px;

}

#slider div p{

  margin: 0;

  color: rgba(255,255,255,1);

  font-style: italic;

}

#slider li{

  position:absolute;

  top:0;

}

#slider li:nth-child(1){

  left: 0px;

}

#slider li:nth-child(2){

  left: 600px;

}

#slider li:nth-child(3){

  left: 1200px;

}

#slider li:nth-child(4){

  left: 1800px;

}