You can animate max-width
using transition
.
On the click event, you need do add class hidden
to the clicked element.
If you have a markup like this:
<ul class="gallery">
<li><img src="image1" alt=""></li>
<li><img src="image2" alt=""></li>
</ul>
You can do the animation with the following CSS:
ul.gallery li {
float: left;
list-style-type: none;
transition: max-width 2s;
max-width: 250px;
overflow: hidden;
}
ul.gallery li.hidden {
max-width: 0;
}
ul.gallery li img {
height: 150px;
margin: 8px;
}
Here is a demo: http://cssdeck.com/labs/pqbkirfl