Visual Sorting array of images in Javascript using CSS3


Check out this demo by FaTaL. It is explained in his blog that he has used CSS3 :target and transitions to achieve this "visual sorting" of images. The target positions have been hard coded in pres.css

The problem is that my array of images is generated at real time. Here is a demo. I want to "visually sort" these images (on button click) alphabetically by file name. How can I achieve such functionality with CSS3 without hard coding the positions ? A JSON object of filename and other parameters will be available at runtime for the sorting.

Problem courtesy of: user1058322


This is exactly the kind of stuff I was looking for Hope it also helps some of you out there.

Solution courtesy of: user1058322


I could not think of any CSS solution. So, here is my pure Javascript solution. Live at

It sorts based on the value set on each a tag's sortelm attribute.

Discussion courtesy of: AppleGrew

This recipe can be found in it's original form on Stack Over Flow.