On 4/3/08, Marcelo de Moraes Serpa <[EMAIL PROTECTED]> wrote: > Hello, > > http://201.51.69.207:8081/fotos > > Take a look at the thumbs. Hover the mouse over them. You can see a "inner" > border is created. However, it isn't yet the way I wanted. Becouse of the > margin rule, the img element "jumps" a pixel towards the top. > > I want something like the effect in this page: http://www.globo.com/ (hover > on any of the thumbs there and see) and have failed to duplicate the effect. > > If someone could helpe me or at least put me in the right direction I would > be grateful! > I have isolated an minimised the code they are using at http://www.dramatic.co.nz/testing/innerborder.html
The effect requires the image to have display:block and a parent with overflow:hidden. If the parent is an <a> element, then the effect will work on IE6. On hover, the parent is resized (reduced by twice the border width, the border is added, and a negative margin applied to the image to prevent it moving. The original used multiple classes in order to control color, and of course you need a separate class for each size of image you want to use the effect on. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
