Mobile Friendly Website


Doing it with style

CSS DEMOSPhotograph gallery using CSS filters

Date : 4th April 2014

For all modern browsers except Firefox and IE

This demo is too wide for your mobile screen.
Please view on a tablet or PC.


A photograph gallery using CSS filters to change a single 'thumbnail' image from a black and white negative to a black and white positive on hover and then to a color positive when selected.

The same image file is used for the large images which zoom and fade in from grayscale to color when selected.

The left and right arrows are the same image with the right image rotated 180 degrees. The images are changed to grayscale with 50% opacity when not clickable.

I have also added a shine effect when a thumbnail image is clicked.

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at} and again a support donation is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page