How it is possible? First, we have to style the image for it’s final place, and then the magic happens: we can use a desaturate filter for the images, and for hover, we can make it to fade in with CSS transitions.

#single_blog img {

 display: inline-block;
 float: left;
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
 -webkit-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;

}

What have we done here? We used a filter for the #single_blog_image. With the -webkit solution, all of the browsers can use the filtered image, and at the end of the style we have used some transition to have the desaturated effect fade out and the original color fade in. This works in all of the major browsers except in Firefox, because it is not a standard method to have the filters fade.

#single_blog img:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
 -webkit-filter: grayscale(0%);
 filter: alpha(opacity=50);
}

To be honest, I couldn’t find any standard solution to fade the filters, so Chrom, Safari and Opera just simply use it, but not Firefox.

Maybe it is not the best solution, but in this case I dont’t need to use some extra script, so at the moment this is the best solution for Us, and it is possible with pure CSS.

Balbu is an international online bookstore, wich operates in most of the european countries. The company sells mainly hungarian books for the European and American countries.

The main goal was to create th best possible user experience with the easiest interface in mind. We wanted to create a store where the user doesn’t have too many unuseful informations, but enough to choose what books are in his/her main interests.

The cart and the checkout process is also easy to use, so not just the “internet generation” knows how to use it, what and where to type. The site also have a news section, where the editors can write about the latest articles about the world of books and happenings. Besides the easy to use interface we wanted to have the fastest site possible, so the users with bad connections can use the site too.

The site is available at: balbu.hu

Special Providence is a hungarian music band who plays progress-jazz-rock. Thez gave us an almost full concept for the site, so our job was the sitebuild and program the functions.

We have used Symfony framework to build it, with some jQuery for the dynamical contant at the homepage. Also, we have built a complete Merchandise menu, where the user can order one of their album sor t-shirts. The system is sending message for the band and the user.

The site is available at: specialprovidence.hu