Question

<div class="row">
   some content

   <div class="info-box">
      some other content
   </div>
</div>


.row {
    float: left;
    margin-bottom: 1.5%;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    width: 685px;
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}


.row:hover {
    background-color: rgb(240, 245, 245);
    -moz-box-shadow:    inset 0 0 5px #4d4d4d;
   -webkit-box-shadow: inset 0 0 5px #4d4d4d;
   box-shadow:         inset 0 0 5px #4d4d4d;

}

.info-box {
    position: relative; 
    border-left: 1px solid #e3e3e3;
    padding: 15px;
    width: 170px;
    font-size: 0.93em;
    color: #363636;
    float: left;
}

Alright, I have this info box inside row. Since at .row:hover, I’m creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.

My question is if you can make the shadow on top of the border. Thanks in advance.

Note: z-index doesn’t work for me.

Answer 1

Of course it’s on top: the child has to appear above the parent, otherwise it’d be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.

If you take a look at this fiddle, I’ve achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.

Basic guide to what I did:

1. Gave .row the CSS position: relative so we can place children in relation to it.
2. Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
3. Added content: ' ' to force the pseudo element to display.
4. Added positioning, height and width, top and left to make the pseudo element cover available width.

EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I’ve updated my example to show this in action.