Comments on: design: creating proper mouse-over borders

By: DynamiXLabs

DynamiXLabs — Tue, 29 Jan 2008 20:38:33 +0000

Hi Eric. The article has been created, and can be found at:

http://www.dynamixlabs.com/2008/01/29/design-creating-an-inline-css-image-border/

By: DynamiXLabs

DynamiXLabs — Tue, 29 Jan 2008 19:40:58 +0000

I have just the thing for you. This is a distinct modification from what we have described above, but should deliver the end result you are looking for. Since this is a little complex, please stand by as we create a separate article to describe exactly how we completed it.

By: Eric

Eric — Tue, 29 Jan 2008 19:31:14 +0000

I don’t have an example of it working online, but this example image should show what I’m thinking of:

http://www.sans-concept.com/images/mouseover_example.jpg

Basically an image border that utilizes the space inside the image as opposed to the default space outside the image.

You could probably do it with an extra div and some tricky styling, but it’d be ideal if you could do it directly to the image link.

By: DynamiXLabs

DynamiXLabs — Tue, 29 Jan 2008 19:21:45 +0000

Hi Eric. Do you have a link to a page that can demonstrate the problem? If you’ll provide the problem, we’ll provide an example fix and link to it in our article. Thanks!

By: Eric

Eric — Tue, 29 Jan 2008 03:00:14 +0000

These methods work well when an image is by itself, but what about a situation where an edge of your image is flush with a page element? I would imagine you’d have to somehow alter the entire way a border is applied to the image- i.e. make the border appear inside/on top of the image instead of around it. Is this possible?

By: Fred Campbell

Fred Campbell — Fri, 25 Jan 2008 18:28:48 +0000

Aaaah, now I see.

By: Mike Archibald

Mike Archibald — Fri, 25 Jan 2008 17:15:31 +0000

Good article.