Mobile Friendly Website


Doing it with style

CSS DEMOSSliding scale image magnifier

Date : Pre 2006

For all modern browsers

                      • rain

Photograph by John Gardiner

Rain plays a major role in the hydrologic cycle in which moisture from the oceans evaporates, condenses into clouds, precipitates back to earth, and eventually returns to the ocean via streams and rivers to repeat the cycle again. There is also a small amount of water vapor that respires from plants and evaporates to join other water molecules in condensing into clouds.

The amount of rainfall is measured using a rain gauge. It is expressed as the depth of water that collects on a flat surface, and can be measured to the nearest 0.27 mm or 0.01 in. It is sometimes expressed in litres per square metre (1 liter/m² = 1 mm).

Falling raindrops are often depicted in cartoons or anime as "teardrop-shaped" - round at the bottom and narrowing towards the top - but this is incorrect. Only drops of water dripping from some sources are tear-shaped at the moment of formation. Small raindrops are nearly spherical. Larger ones become increasingly flattened on the bottom, like hamburger buns; very large ones are shaped like parachutes. [1] The shape of raindrops was studied by Philipp Lenard in 1898. He found that small raindrops (less than about 2 mm diameter) are approximately spherical. As they get larger (to about 5 mm diameter) they become more doughnut-shaped. Beyond about 5 mm they become unstable and fragment. On average, raindrops are 1 to 2 mm in diameter. The biggest raindrops on Earth were recorded over Brazil and the Marshall Islands in 2004 - some of them were as large as 10 mm. The large size is explained by condensation on large smoke particles or by collisions between drops in small regions with particularly high content of liquid water.

Source: Wikipedia - The Free Encyclopedia


Using a similar principles to my animations and my drop-down/flyout menus I have produced this gradient image enlarging demonstration.

This uses just one image which is nested 'eleven' deep' in list items to give a variable image magnifier.

Well, it does for non-IE browsers which use the list items for the hover enlarging. But IE has to be hacked into performing the same task by using tables and nested links.

Just move your mouse left or right over the bar chart above the image to see the gradual enlarging of the image.

This works in IE5.5, IE6 and hopefully IE7 final (when released), Firefox, Opera and Safari.

If anyone using other browsers could confirm if this works I would be grateful.

The text has been added to show that the original small size image, which is held in a relative positon div acts as a normal float left image but also acts as an absolute positioned image when enlarged.

The css is held in the source code of the page and requires a separate style for IE. The (x)html is held in the #info div in the body of the source code.

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