Resize Images to Maximum Size when Mouse Hovers

Resize Images to Maximum Size when Mouse Hovers
7858
****½
By -=Ben=-
Last updated Aug 01 2008
12 installs this week, 635 total.

Hover your mouse over an image, and it will display in its full size. This only works for images that have been resized in code (example: The preview images of Styles on UserStyles)

** Thanks goes to arteekay (rtk) for the Image Resize idea, which is used in the Userstyles.org - tweaked. I made the code work on Width and Height as well, not just Max-width and Max-Height!!

Try it out!
Once you install the Style, head over to the page: Custom Toolbar Firefox Background Image (WOW!) and give it a try... Cool hey?

Functions:
- When you hover your mouse over an image that has been resized, it will display normally.

Applies to:
- Any image that has been resized by code
- max-width, preventing a full-width image
- max-height, preventing a full-height image
+ Just hover your mouse cursor over the image, and it will appear in it's original state (100% size, as if you were to save it to your disk.)

Browser Versions:
- Works on Firefox 2
- Works on Firefox 3

Additional Information:
+ This style works PERFECTLY on Userstyles.org for the Image Previews of the Styles!
+ This style has been tested on Multiple Themes! It has worked perfectly on each.

Extension Compatability:
** For those of you using the Firefox Extension "Image Zoom" please comment or remove the following lines in the code:
height: auto !important;
width: auto !important;
Thanks!

Changelog:
1.0.0.4:
+ Code Cleanup, making it function better
+ Added Animated After Image - Use Firefox 3 to view the animation.
1.0.0.3:
+ Added support for Chrome:// (web pages inside Firefox's configuration) - now works on Extensions such as Brief.
+ Added support for FTP sites.

1.0.0.2:
+ Added support for Local Files (html files located on local computer hard drive)

1.0.0.1:
+ Fixed Bug where images that Firefox resized were reacting to the hover sizing.
+ Thanks goes Entirely to user myf for reporting the problem, AND producing a fix. (This update fix was all myf's code)
I thank you for the code, myf, and continual support of my styles.

Before
After

Install options

Feedback

Reviews

makondo said on Jul 11 2008

The original size image may - and often does - stretch the screen (like USBman mentioned). I also use autoflow scrollbars, this style makes it impossible to get to those scrolls as images shrink on mouseout, of course. Sorry, useless to me for now, going back to http://userstyles.org/styles/2824. ****

Chiribaka said on Jul 07 2008

Greatly apreciated! *****

myf said on Jun 22 2008

Really nice idea.
I made variation that tries to fix "bug" mentioned by USBman. Try it and if you'll find it usable, update your code and I'll make mine obsolete.
BTW, for those curious about transparency: Show transparency of in-page images on hover. *****

USBman said on Jun 20 2008

Nice idea.

I do want to point out that this disrupts the normal display of (unscaled) images that are larger than the size of the current Firefox window. This is unavoidable, as far as I can tell - if anyone can figure out a way to make this style only operate on images that are unscaled by Firefox, it would be much stronger! ...other than that, it is a nice simple script. ****