Outline getting hidden by the next element

Question

I have a row of images, each wrapped in a link.

I want a dotted outline to appear around each image when I hover the mouse.

The trouble is, the outline on the RHS is missing from all but the last image.

Its as if the images are overlapping the outline of the image to its left.

Anyway to make an outline appear on all 4 sides when I hover?

(I need the images to butt up to each other without gaps.)

I tried this out on FF14, chrome, IE9.

http://jsfiddle.net/spiderplant0/P3WBG/

@Brandon, that's what I thought. And then I clicked on 'run' again, and, suddenly, valid images were there. — David Thomas, Aug 03 '12 at 19:57
@Brandon, they are valid images. Or is there a better way to do this? — spiderplant0, Aug 03 '12 at 20:10
@spiderplant0, no it was my mistake. The images are actually valid, I just needed to run the JSFiddle first. Sorry. — Brandon, Aug 03 '12 at 20:11

score 19 · Accepted Answer · answered Aug 03 '12 at 20:01

The easiest way is to assign position: relative to the a elements, and then increase the z-index of the a > img:hover (instead of styling the a:hover:

a > img {
    position: relative;
}

a > img:hover {
    outline: 3px dotted blue;
    z-index: 3000;
}

JS Fiddle demo.

score 15 · Answer 2 · answered Aug 03 '12 at 19:59

15

Just add position: relative; z-index: 1000 to their :hover style: updated fiddle

Updated: Actually, you don't even need the z-index, relative positioning by itself accomplishes your goal.

answered Aug 03 '12 at 19:59

lanzz

42,060
10
89
98

score 0 · Answer 3 · answered Aug 03 '12 at 19:59

0

What you could do is set each images border to be 1px solid whatever the background color is, then on img:hover you set the border to what you want. Here is a working jsFiddle of what I'm talking about:
http://jsfiddle.net/P3WBG/12/

answered Aug 03 '12 at 19:59

Vap0r

2,588
3
22
35

+1, this is probably a better answer than mine, and a nifty little trick. – Brandon Aug 03 '12 at 20:00
How does that cover the requirement that images need to have zero distance between them? – lanzz Aug 03 '12 at 20:03
That was never a requirement, the requirement was for them to butt up against each other without gaps. Mine produces no gaps, and works without having to use a `position: relative` hack, which I was trying to avoid. – Vap0r Aug 03 '12 at 20:05
Not suitable for me I'm afraid as images have to butt up against each other as they form part of a larger seamless image (I guess I should have been more explicit). Thanks anyway though. – spiderplant0 Aug 03 '12 at 20:09
It is very explicit: `I need the images to butt up to each other without gaps`. You're producing _background_ without gaps, not images without spacing between them; if used with non-transparent images which actually have content right up to the edge, they will have very obvious gaps. – lanzz Aug 03 '12 at 20:10

Outline getting hidden by the next element

3 Answers3