CSS Membuat Slider Image Variasi 1

CSS Membuat Slider Image Variasi 1 - Slider dan Slider lagi, gag tau ni pas seneng ama slider, bagi sebagian orang slider adalah daya tarik tersendiri bagi blognya. Ada juga yang beranggapan hanya akan memperlambat loading Blog kita saja. Tapi kembali lagi tergantung dari kebutuhan masing-masing.

CSS Membuat Slider Image Variasi 1 - Bingung mau ngasih judul apa, karena yang memakai judul itu pasti banyak sekali, dan pastinya gag bisa jadi keyword yang cocok untuk judulku itu. West babahin yang penting jika kapan-kapan pingin make, aku tinggal buka blog ku lagi.

Yang mau nyoba atau lihat demonya bisa klik link dibawah ini :

 Berikut ini script CSS nya :

.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%;
margin:1px;
border: 3px solid black;
opacity: 1;
}

.grande {
width:100%;
position: absolute;
top: 800px; margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}

.muestra {
opacity: .3;
width: 200%;
top: 170px;
}

a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}

a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}

Script HMTL :

 <div class="contenedorvisor">

<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN1" />
<img class="grande" src="URL_IMAGE_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN2" />
<img class="grande" src="URL_IMAGE_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN3" />
<img class="grande" src="URL_IMAGE_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN4" />
<img class="grande" src="URL_IMAGE_ORIG4" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN5" />
<img class="grande" src="URL_IMAGE_ORIG5" />
</a>
<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGE_ORIG1" />
</a>
</div>

Oke, Selesai silahkan dipraktekin bagi yang mau.  heee.. :)

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.