CODEWITHSUNDEEP
cssheighthtml-lists
Ali
Ali

Reputation: 135

Change height without effect on other elemetns

How do you change the height of an li element when it is hovered over without effecting other li elements, like position, but I'd like the hovered li to overlap with others below, like it has the greatest z-index.

In this jsfiddle example, I want to height to change but not move any elements below the hovered li element.

Upvotes: 0

Views: 929

Answers (1)

Froopy
Froopy

Reputation: 369

You can use the margin to compensate for the height change.

ul.products li {
  width: calc(25% - 12.5px);
	display: inline-block;
  transition: box-shadow .15s ease;
  background-color: #fff;
  padding-bottom: 50px;
	margin:0 10px 10px 0;
	text-align: center;
  height:50px;
  margin-bottom: 30px;
}
ul.products li:hover {
  height:70px;
  margin-bottom: 10px;
}
<ul class="products">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

In a normal setting, you have 50px as the height and 10px as the bottom margin. In the above example, I've added the extra 20px to the original margin-bottom (for a total of 30px) and just set the hover margin-bottom to 10px and the height to 70px.

That way, the total height will always be 80 pixels with the margin and you can shift the li height without an issue.

Edit: @Mr Lister's method actually is much closer to your original intention as it makes the hovered li overlap the other li items below. I had misunderstood what you meant in your original unedited question by 'greater z-index' when I edited it. My apologies.

Upvotes: 1

Related Questions