How to make tabs that expand on hover!

Code

I'm about to go way too in-depth about this. If you just want the code, here it is.

<div>
  <div class="tabs">
    <div class="tab">tab</div>
    <div class="tab">tab</div>
    <div class="tab">tab</div>
  </div>
</div>
	

.tab-container{
  margin-top: -40px;
  height: 40px;
  align-items: flex-end;
  display: flex;
  gap: 10px;
}
.tab{
  color: white;
  height: 20px;
  background: #FF69B4;
  padding: 10px;
}
.tab:hover{
  height:40px;
}
	

Step 1: your HTML

Set up the element your tabs will be on however you want! Then you can set up your tabs. This works the same if you're making them buttons, links, or even just plain text. You want the tab container inside the element they'll be above.

<div>
  <div class="tab-container">
  	<div class="tab">Your text</div>
  	<div class="tab">Your text</div>
  	<div class="tab">Your text</div>
  </div>
</div>
	

Step 2: placing the container

The height can be anything, but the margin has to match! If the parent element has padding, take that into account. For example, if my div had a padding of 20px, my tab-container height would be 40px but the margin-top would be -60px.

.tab-container{
  height: 40px;
  margin-top: -40px;
}
	

Step 3: aligning the tabs

I like to use flex for this!!

.tab-container{
  height: 40px;
  margin-top: -40px;
  align-items: flex-end;
  display: flex;
  gap: 10px;
}
	

Step 4: styling your tabs

.tab{
  color: white;
  height: 20px;
  background: #FF69B4;
  padding: 10px;
}
	

Step 5: adding hover!

This is when the container height you set earlier comes in!

.tab:hover{
  height:40px;
}