Question

I have several divs arranged horizontally next to each other with a black border of 1px. They overlap on left/right sides. I don’t want to add margin as that would cause the border to be 2px when elements are next to each other.

When a user hover’s over the border changes to white color. The issue is that the second element(and others after first element) have their left border hidden behind the previous element and it appears that the left border doesn’t change color. How can I make the hovered element be on top? I tried z-index with no change at all.

.upcoming a:before{
    display:block;
    content:'';
    position:absolute;
    width:184px;
    height:277px;
    border:1px solid #666;
}

.upcoming a:hover:before{
    border-color:#CCC;
}

(I am using :before for different reasons than border – overlapping box shadow)

Edit: added picture

In this screenshot “the fall” poster is hovered an it is zoomed in quite a bit too. Notice that the left border is not lighter color(because it is overlapped by the fists border).

Answer 1

Although you have already tried, I think z-index is the best option here. It is designed purely for being able to manage the z-position of each element.

See this jsfiddle for example:

http://jsfiddle.net/CjYa9/1/

Perhaps you were doing something different.