CSS Box/shadow overlapping issue z-index

Question

Please take a look at the code snippet: http://codepen.io/anon/pen/JItLa

I\'m trying to show 2 rows of blocks with different amount of items in a row. The hover even

Answer 1

Add a z-index to the element on hover.

Additionally, the element also has to be positioned in order for the z-index property to work. Therefore add position:relative too.

9.9.1 Specifying the stack level: the 'z-index' property

z-index: Applies to: positioned elements

Each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

Updated Codepen - it works now.

.tile:hover, .tile2:hover {
    z-index: 1;
    position: relative;
}

To address your second issue, the elements are appearing on a new line because their widths do not add up, as it is 1px off due to the border.

33.3% + 33.3% + 33.3% + 1px != 100%

You have a few different options:

• Use calc() to subtract 1px from the width - width: calc(33.3% - 1px)

• Change the box model to include the border in the element's width calculation - box-sizing

If you choose to use box-sizing, you need appropriate vendors/prexes if you want support across all browsers. I would use something like:

.tile2 {
    width: 33.3%;
    border-left: 1px solid #ffffd;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Updated Codepen using box-sizing.

Answer 2

Add the following CSS, if you do not need the gap between the divs.

.wrapper {
  text-align: center;
  font-size: 0px;
}
.tile,
.tile2 {
  display: inline-block;
}
.tile:hover,
.tile2:hover {
  z-index: 1;
  position: relative;
}
.header {
  font-size: 12px;
}
`