How do you make the iCloud dynamic background effect?

Question

How can I do the effect of the login with the background as the iCloud when changing the size of the browser?

If you repair the overshadowed objects change their position depending on the size of the browser. In the first image are 2 rows of objects by 7 columns, in the second image are 3 rows by 5 columns.

You can do that with bootstrap?

Answer 1

Browsing the web I found a possible solution to the appearance of Blur, if necessary, what you can understand is everything done by CSS, only a JS to trigger the effect when necessary, there is not much secret.

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Follow link with effect instructions: http://jsfiddle.net/Josh_Powell/6G6jR/1/

In question of the relocation of objects, the objects are replaced alone, a similar effect is the grid-system/bootstrap thumbnails.