CODEWITHSUNDEEP
csshoverscalez-index
Kurt Ingwersen
Kurt Ingwersen

Reputation: 45

CSS Transform Scale z-index

I'm trying to figure out how to bring the hover content from the section "some featured design works" on top of other tiles in that section.

Hover over the 400x400 image placeholders and you'd see the titles for these going underneath the other ones.

THANKS!

Upvotes: 0

Views: 3368

Answers (3)

user4447799
user4447799

Reputation:

As the tiles are inside different "row" divs, so no matter what z-index you apply, they will be stacked according to the parent "row" div order.

The z-index property is relative to the parent container. So a z-index of 100 in the 1st row will be under the z-index of 1 in the 2nd row

You can only fix this by putting all of the tiles inside the same "row" div and then then give a high z-index (something like 9999) to the hover style.

Upvotes: 3

Brendan
Brendan

Reputation: 331

From inspecting the code on the example you provided, it looks like each image has a negative z-index:-999 then a transform:scale(1.5); is applied to the parent on hover.

CodePen Example

Upvotes: 0

AVAVT
AVAVT

Reputation: 7143

Just use z-index:

.wordWrap:hover{
   ...
   z-index: 1;
}

Upvotes: 0

Related Questions