CSS Based Animated Accordion

<style>
/* CSS */
/* I have two classes for the two accordions, .horizontal and .vertical. I'll start off with the styling that will apply to both */
/* I'll remove the base styling from the ul and, in this case, center it on the page */
.accordion {
margin: 30px auto;
padding: 0;
list-style-type: none;
overflow: hidden; /* This will keep the slides from overflowing outside the accordion */
}
/* Now for the slides themselves */
.accordion li {
/* Remove any margins & paddings */
margin: 0;
padding: 0;
/* and hide the content when it overflows */
overflow: hidden;
/* Let's add a little drop shadow to each slide to give them a "layered effect" */
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
/* and now we'll add a transition to animate the switching between slides */
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Simple enough? Now to style the horizontal version */
/* First, set the size of the accordion */
.accordion.horizontal {
width: 800px;
height: 200px;
}
/* Then, set the size of the normal state of the slides. The width will be the main width divided by how many slides you have */
/* In this case, 800px / 5 = 160px */
.accordion.horizontal li {
width: 160px;
height: 200px;
float: left;
}
/* Next, we set the width of the slides that are *not* being hovered */
/* The formula to figure this out is (width of accordion - width of hovered slide) / (number of slides - 1) */
/* In my example: (800px - 600px) / (5 - 1) = 50px */
.accordion.horizontal:hover li {
width: 50px;
}
/* now for the slide that *is* being hovered -- this overrides the previous width */
.accordion.horizontal li:hover {
width: 600px;
}
</style>
<!-- HTML -->
<!-- Hi folks! @pixleight here. Today, we're going to make an animated CSS-based accordion -- no fancy javascript required! -->
<!-- Ready? Here we go.. we'll start with a basic unordered list, with each li containing a linked image -->
<ul class="accordion horizontal">
<li>
<a href="http://foulscode.blogspot.gr">
<img src="http://www.cv-designs.com/wp-content/uploads/2012/09/accordion-horiz01.jpg" alt="slide 01">
</a>
</li>
<li>
<a href="http://foulscode.blogspot.gr">
<img src="http://www.cv-designs.com/wp-content/uploads/2012/09/accordion-horiz02.jpg" alt="slide 02">
</a>
</li>
<li>
<a href="http://foulscode.blogspot.gr">
<img src="http://www.cv-designs.com/wp-content/uploads/2012/09/accordion-horiz03.jpg" alt="slide 03">
</a>
</li>
<li>
<a href="http://foulscode.blogspot.gr">
<img src="http://www.cv-designs.com/wp-content/uploads/2012/09/accordion-horiz04.jpg" alt="slide 04">
</a>
</li>
<li>
<a href="http://foulscode.blogspot.gr">
<img src="http://www.cv-designs.com/wp-content/uploads/2012/09/accordion-horiz05.jpg" alt="slide 05">
</a>
</li>
</ul>