Mobile Friendly Website


Doing it with style

gradient magnifier v2 COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Wow, very nice and smooth! Just one question. Why the distinction between top, left, or right side of the box in your description? Entering the box from the bottom seems to have the same effect for me in Fx Okay, two questions. I'm not quite sure what you mean when you say it doesn't reduce after reaching full size. For me it looks to do the same as the previous example at full size... did you mean it doesn't reduce gradually via moving left on the gradient slider thing in the previous example?

Either way, terrific stuff! And I look forward to seeing more of your wonderful menu demos on that new page too! You're my CSS Superhero, Stu.
(26.05.2006, 20:59)

Jason, I made the distinction because for the sake of having a square box you have to move the mouse past the bottom border to get the effect. I may revise the sizing to have this work on the bottom border.
The bit about reducing means that after the image reaches full size, no matter where you place the mouse within the box it will not reduce in size. Moving the mouse outside the box will reset the image to its original size.
Hope this explains it more clearly.
(26.05.2006, 21:04)

Fixed the height to fit the box, now any side can be used to see the effect.
(26.05.2006, 21:19)

Excellent work Stu. When I first saw the image zoom I almost expected a 'zoom' sound effect, like the computers on CSI cop shows always seem to have when they enlarge an image or magically enhance a grainy photo to display a car licence plate! Seriously though, this may have some really good applications for photo gallery / thumbnail pages.
(27.05.2006, 00:35)

I, too, am impressed with themagnifying effect. I haven't looked at the CSS in detail yet but a thought just came to me regarding the process. I would like to have the full size image display the front of a subject on the left half and on the right side would display the subject from the back. When the image displayed without magnification it would only display the left side (front) and ten display both sides when magnified. Seems like it should be possible. Just a thought.
(27.05.2006, 17:01)

I keep coming back here to your site Stu. This magnifier css is a reminder to as why.

Great, no, amazing work.
(06.06.2006, 16:29)

Hello from Belgium.
I copied your magnifier and wrote a tutorial in French for other people (with a link to your site).
Thank you.
(23.06.2006, 22:45)

It works in Netscape 8.1, but has the same problem as Internet Explorer (need to move the mouse). Good work by the way.
(27.06.2006, 21:57)

Hi Stu,
this is really awesome - never thought that something like this is possible only with css.
You are my hero :)
Greetings from Vienna!
(08.08.2006, 10:33)

A fix for IE7 coming shortly
(05.02.2007, 10:12)

Hey Stu!

I dunno why, but every time I mouse over, and the lil birdie zooms, make me giggle lol.

I have a few ideas on what can be done with this, if I'm able to put something together, I'll post back.

And of course, you rock... always the best examples, always testing the boundaries ;-)

(03.04.2008, 22:32)

(quote-begin) "This works in Firefox and Opera v8.54, and almost makes it in IE5.5, IE6, IE7 and Opera 9.1. Again, feedback on other browsers would be appreciated." (quote-end)

hey, stu . . . really enjoy all your css-demos . . . quite imaginative in some.

the image enlarges to full size in all my browsers :
opera 9.52
firefox 3.0
ie 8.0 (also ie 7*)
safari 4-beta
chrome 2-beta

*works in ie 7 using the ie 8 'developer' tools.

just fyi . . . in all the above browsers (except firefox) . . . depends which part of the thumbnail you hover . . . nearer the center means larger the image.

(18.05.2009, 02:45)

It works in my version of Firefox 3.0.10
(18.05.2009, 09:27)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


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