MooTools 1.3 Cookbook

Saving space on our site: creating a transition that grows an IMG from small to large

In this recipe we will learn about how to use the mouse over an image technique to enlarge the image.

Getting ready

Prepare a thumbnail image that is constrained via a CSS class definition, .smaller_image.

<img src="08_nature.jpg" alt="Nature" class="smaller_img"/>
<style type="text/css">
.smaller_img { width:100px; }
.bigger_img { width:500px; }
</style>

How to do it...

Much like the previous recipe, we use the MooTooled element property, which comes from the Fx.Morph() class. The difference in this recipe is that we pass to Element.morph() the class that contains ...