Home/ Questions/Q 8479061
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T18:55:14+00:00

I’m trying to make a harmonica effect by changing the height of divs when

  • 0

I’m trying to make a harmonica effect by changing the height of divs when hovering over another one.

My HTML looks like this:

<html><body>
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3"></div>
  <div class="section4"></div>
</body></html>

Every section has a height of 25%.
When hovering over section1, all the other divs should reduce in size while section1 expands. This is easily done with the following CSS:

.section1 {
  height: 40%;
}
.section1:hover ~ div:not(section1) {
  height: 20%;
}

The problem is that the ~ selector only selects sibling divs that are below the current div. So if I use the same code for section2, only section3 and section4 will be affected. Section1 will have it’s original height of 25% because it’s above the current div.

Can I solve this problem with just CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes. Put a wrapper around your sections and reduce their height on hover on the wrapper. Then increase the height of the one section you are hovering.

    DEMO

    HTML becomes:

    <div class='section-wrapper'>
    <div class="section1"></div>
    <div class="section2"></div>
    <div class="section3"></div>
    <div class="section4"></div>
</div>

    Relevant CSS:

    .section-wrapper {
    height: 500px;
}
.section-wrapper div {
    height: 25%;
    outline: dotted 1px;
}
.section-wrapper:hover div {
    height: 20%;
}
.section-wrapper div:hover {
    height: 40%;
}
    • 0