Mobile Friendly Website


Doing it with style

CSS DEMOSCSS image magnifier using transitions

Date : 13th August 2008

For all modern browsers

The Hay WainThe Haywain is an oil on canvas painting by John Constable. It was finished in 1821 and shows a hay wain near Flatford Mill on the River Stour at Flatford, Suffolk.

Flatford Mill was owned by Constable's father and the house on the left side belonged to a neighbour, Willy Lott (a tenant farmer), who was said to have been born in the house and never to have left it for more than four days in his lifetime. Willy Lott's house has survived to this day practically unaltered, but none of the original trees in the painting exist today. The water level is also higher as that area of East Anglia has sunk into the sea by one foot (30 cm) since Constable's time.

The Hay Wain is revered today as one of the greatest British paintings, but when it was originally exhibited at the Royal Academy in 1821 (under the title Landscape: Noon) it failed to find a buyer. It was considerably better received in France where it was praised by Théodore Géricault. The painting caused a sensation when it was exhibited with other works by Constable at the 1824 Paris Salon (it has been suggested that the inclusion of Constable's paintings in the exhibition were a tribute to Géricault, who died early that year). In that exhibition The Hay Wain was singled out for a gold medal awarded by Charles X of France, a cast of which is incorporated into the picture's frame. The works by Constable in the exhibition inspired a new generation of French painters, including Eugène Delacroix.

The painting was voted the second best painting in Britain in a 2005 poll organised by the Today programme in September 2005. It is currently exhibited at the National Gallery in London.

Source Wikipedia.

The Haywain


This was originally for Safari and Google Chrome users ONLY.

The previous exampe took a lot of CSS manipulation to get enlarging and fading images in all browsers, but now Safari can do it with just a couple of lines of style.

Hover over 'The Haywain' at the start of the text to see a fade in of the painting.

Hover over the small image of the Haywain to see it enlarge to full size.

REMEMBER this is for the latest version of SAFARI, all other browsers will see a sudden jump from one image to the next (except IE6 which will not see the image enlarge).

2nd September 2008

Amazingly enough, this also works in the new Google Chrome browser.

20th January 2012

This now of course works in Firefox, Opera and IE10+.

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