3 ms·

By "zoom", I'm assuming you mean the zoomed-in-on-hover effect on the illustration on http://disqus.com http://disqus.com. (I was a little confused as to what y

By "zoom", I'm assuming you mean the zoomed-in-on-hover effect on the illustration on http://disqus.com http://disqus.com. (I was a little confused as to what you meant until I went looking.) To answer the question: it's done by having a 120px square div that: * Has the full "zoomed" image as the background: http://mediacdn.disqus.com/1318540955/img/marketing/homepage/illustration.jpg http://mediacdn.disqus.com/1318540955/img/marketing/homepage... * Has a thick white border, 120px border-radius and a box-shadow applied. * Is absolutely positioned, with its top and left being controlled by javascript.

EGreg 15y ago
Thanks! I assume that the border-radius is what causes the image to appear round like that. Do you think it works in all the major browsers which support rounded corners? FF, IE8+, and WebKit? Also I think there is one more factor * The background position is probably being controlled by javascript as well
- damncabbage 15y ago
  Oh! Sorry, forgot that one. border-radius will work on Firefox and Webkit (but you'd best include the -moz and -webkit versions as well, for older versions that don't pay attention to the plain attribute). It's a bit tougher with IE. IE7 and IE8 don't support border-radius, but support can be faked with something like http://css3pie.com/ http://css3pie.com/ or http://fetchak.com/ie-css3/ http://fetchak.com/ie-css3/
  - EGreg 15y ago
    That's awesome! I wasn't aware of these IE behaviors. Thanks once again for the info. Now the effects can work everywhere!