CODEWITHSUNDEEP
htmlcss
trupanka
trupanka

Reputation: 703

How to prevent block in the dynamic layout from jumping up

I need to fix behavior of the layout when changing height of the previous block also changes the position of the next.

In my example, red block (.jumper) is jumping up when the 1st element in the 2nd row is "hovered". But I need red block to stand still on its position. Like in this case where there was added one element to the second row.

How to do that?

Why in the second case height of the container (main) haven't been changed?

Upvotes: 0

Views: 231

Answers (2)

saeraphin
saeraphin

Reputation: 435

Ah, found it! :)

Just make the following changes to your code:

.zaglushka table {
  position: absolute;
  top: 100%;
  display: none;
}

.zaglushka:hover {
  z-index: 10;
  transform: scale(1.2);
}

I knew there was something weird with the scale transformation causing content displacement, it was because of the table that was getting shown/hidden.

I think this solution should do it.

Upvotes: 1

Frederik Witte
Frederik Witte

Reputation: 1345

It's because on hover you add a margin of -20%. If you want to have the same thing then either add another of those pictures, add a margin of 20% on the text div or the best solution:

Change the margin: 0 0 20% 0 in the hover to padding with the same values

Upvotes: 1

Related Questions