Add onMouseOver to <cfimage> output / scale images to fit onMouseover?

Im resizing my images to create thumbnails using the <cfimage> tag but I want them to appear larger in a div
elsewhere on my page ( proportionally scaled ) onMouseOver.

The following code works for re-sizing the images ::
------------------------------------------------------------------------------------------------------------------------------------
<!--- Create a square thumbnail --->
<cffunction name="squareThumbnail" access="private" returntype="void">
      <cfargument name="image" required="true" />
      <cfargument name="size" required="true" />

      <cfset var half = int(arguments.size / 2) />
      <cfset var fromX = 0 />
      <cfset var fromY = 0 />
      
      <!--- Resize image by height if width is greater then height --->
      <cfif arguments.image.height gt arguments.image.width>
      
            <cfset imageResize(arguments.image, arguments.size, '') />
            <cfset fromX = arguments.image.Height / 2 - half />
            <cfset imageCrop(arguments.image, 0, fromX, arguments.size, arguments.size) />
      
      <!--- Resize image width if height is greater then width --->
      <cfelseif image.width gt image.height>
      
            <cfset imageResize(arguments.image, '', arguments.size) />
            <cfset fromY = arguments.image.Width / 2 - half />
            <cfset imageCrop(arguments.image, fromY, 0, arguments.size, arguments.size) />
      
      <!--- Already Square, can do a resize with no cropping --->
      <cfelse>
      
            <cfset imageResize(arguments.image, '', arguments.size)>
            <cfset imageCrop(arguments.image, 0, 0, arguments.size, arguments.size)>
      </cfif>
      
      <cfimage action="writetobrowser" source="#arguments.image#" />

</cffunction>
------------------------------------------------------------------------------------------------------------------------------------