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="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"...

CSS

.image-container{position:relative;width:100%;height:auto;margin:0 auto;padding:0;text-align:center;overflow:hidden}
.mini-thumbnail{width:12.5%;height:auto;margin:0;opacity:1;display:inline-block;float:left}
.large-thumbnail{position:absolute;width:100%;height:auto;top:11%;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}