Image slider CSS

by kompiajaib

HTML

<div class="image-container">
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/s1600/Tulips.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/s1600/Tulips.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://3.bp.blogspot.com/-Jqi3i20Puq4/UtHLYQyWJMI/AAAAAAAAAAk/PKhcyaKi7zA/s1600/Chrysanthemum.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://3.bp.blogspot.com/-Jqi3i20Puq4/UtHLYQyWJMI/AAAAAAAAAAk/PKhcyaKi7zA/s1600/Chrysanthemum.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://4.bp.blogspot.com/-HpeqiB1hM7o/UtHLeI4SBHI/AAAAAAAAAAs/DfOBqqPO25s/s1600/Desert.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://4.bp.blogspot.com/-HpeqiB1hM7o/UtHLeI4SBHI/AAAAAAAAAAs/DfOBqqPO25s/s1600/Desert.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://1.bp.blogspot.com/-tvCPB1JojJk/UtHLh379FkI/AAAAAAAAAA0/lYJQ33e2D_Q/s1600/Hydrangeas.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://1.bp.blogspot.com/-tvCPB1JojJk/UtHLh379FkI/AAAAAAAAAA0/lYJQ33e2D_Q/s1600/Hydrangeas.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://3.bp.blogspot.com/-U3nQz8Z08Ec/UtHLmQJEnII/AAAAAAAAAA8/kC581_pfXTY/s1600/Penguins.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://3.bp.blogspot.com/-U3nQz8Z08Ec/UtHLmQJEnII/AAAAAAAAAA8/kC581_pfXTY/s1600/Penguins.jpg" />
</div>
<div class="feature">
<img alt="feature" src="http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/s1600/Tulips.jpg" />
</div>
</div>

CSS

.image-container {
position: relative;
width: 100%;
height:auto;
margin: 0 auto;
padding:0;
text-align:center;
overflow:hidden;
}

.mini-thumbnail {
width: 20%;height:auto;
margin:0px;
opacity: 1;display:inline-block;float:left
}

.large-thumbnail {
position: absolute;
width: 100%;
height:auto;
top: 16.5%;
left:-100%;
margin:0;
text-align: center;
display:block;
transition: left 1s ease-out;
}
.feature img{
width: 100%;height:auto;
opacity: .5;z-index:1;transition:all 400ms ease-in-out;
}
.mini-thumbnail:hover {
opacity: .5;
}
.image:hover .large-thumbnail {
left:0;
width: 100%;
z-index:3;
transition: left 1s ease-in;opacity:1;
}