CODEWITHSUNDEEP
htmlcsshoverwidth
t4d_
t4d_

Reputation: 513

how to make :hover height to not move object under it

I have this fiddle : jsfiddle.net/kxmzqbtL/

How can I make that the elements above other elements dont move these under them. @fiddle : when hovering first three childs, it moves 4th and 5th child to fix its hover /width/ effect. How can I make it overlay these elements insted of moving them? Or other way to make it looks better, like scale first element up instead of down.

Thanks.

Upvotes: 0

Views: 109

Answers (1)

JoannaFalkowska
JoannaFalkowska

Reputation: 3677

Add to the .item:hover:

margin-bottom: -15%;
z-index: 1;

Negative margin will make items placed below go up instead of down (so in this case it will negate added height and items will stay in the same place).

Fiddle: http://jsfiddle.net/kxmzqbtL/2/

Upvotes: 1

Related Questions