разверните и измените изображения при наведении курсора на 3 раздела панели изображений

Question

У меня есть секция изображения с 3 панелями (секции 1, 2 и 3) - например, при наведении курсора на секцию 1, я хотел бы, чтобы исходный bg исчезал, в то время как новый bg исчезал при одновременном увеличении до полной длины. из раздела «перекрытия» других разделов. Как только этот раздел будет на всю ширину, я хотел бы иметь возможность навести курсор на второй раздел, и тот же процесс происходит без необходимости сначала перемещать мышь из области раздела.

Мне удалось добраться до точкигде раздел расширяется и изображение меняется, однако, как только говорят, что раздел 1 расширяется - он занимает всю ширину раздела, поэтому при наведении курсора на раздел 2 не запускается анимация при наведении курсора для раздела 2. Вместо этого мне нужно переместить мышь, чтобычто он находится за пределами раздела и снова войдите в раздел 2, чтобы начать анимацию.

Вероятно, его легче увидеть, так как прикрепленный файл представляет собой jsfiddle в дополнение к приведенному ниже коду.

https://jsfiddle.net/tr5km94w/1/

<div class="panel-test-background">
  <div class="panel-test-one"></div>
  <div class="panel-test-two"></div>
  <div class="panel-test-three"></div>
</div>

<div class="panel-container">
  <div class="panel-one">
    <div class="panel-text-one">
      <div class="text-top">
          <h3>section</h3>
          <br />
          <h1>Section Title No.01</h1>
          <br />
      </div>
    </div>
  </div>
  <div class="panel-two">
    <div class="panel-text-two">
        <div class="text-top">
            <h3>section</h3>
            <br />
            <h1>Section Title No.02</h1>
        </div>
    </div>
  </div>
  <div class="panel-three">
    <div class="panel-text-three">
        <div class="text-top">
            <h3>section</h3>
            <br />
            <h1>Section Title No.03</h1>
        </div>
    </div>
  </div>
 </div>

<style>
.panel-container {
    width: 100%;
    height: 75vh;
    display: flex;
}

.panel-one {
    flex-grow: 1;
    height: 75vh;
    position: relative;
    pointer-events: none;
}

.panel-two {
    flex-grow: 1;
    height: 75vh;
    position: relative;
    pointer-events: none;
    left: 6px;
 }

.panel-three {
    flex-grow: 1;
    height: 75vh;
    position: relative;
    pointer-events: none;
}

.panel-text-one {
    flex-grow: 1;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    pointer-events: none;
}


.panel-text-two {
    flex-grow: 1;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    pointer-events: none;
 }

.panel-text-three {
    flex-grow: 1;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    pointer-events: none;
}

.panel-text-one h3 {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
    color: white;
}

.panel-text-one h1 {
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
}

.panel-text-one span {
    color: white;
}

.panel-text-two h3 {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
    color: white;
}

.panel-text-two h1 {
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
}

.panel-text-two span {
    color: white;
}

.panel-text-three h3 {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
    color: white;
}

.panel-text-three h1 {
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
}

.panel-text-three span {
    color: white;
}

.panel-test-background {
    width: 100%;
    height: 75vh;
    position: absolute;
    display: flex;
}

.panel-test-one {
    flex-grow: 1;
    height: 75vh;
    background: red;
    width: 0%;
    transition: width 0.5s;
}

.panel-test-one:hover {
    width: 100%;
    transition: width 0.5s;
    background: blue;
}

.panel-test-two {
    flex-grow: 1;
    height: 75vh;
    background: green;
    width: 0%;
    transition: width 0.5s;
}

.panel-test-two:hover {
    width: 100%;
    transition: width 0.5s;
    background: yellow;
}

.panel-test-three {
    flex-grow: 1;
    height: 75vh;
    background: purple;
    width: 0%;
    transition: width 0.5s;
}

.panel-test-three:hover {
    width: 100%;
    transition: width 0.5s;
    background: pink;
}
</style>

Проблема, с которой я столкнулся, заключается в том, чтоэто потому, что какой бы раздел вы изначально не навели, он занимает всю ширину контейнера, так что, когда раздел 1 расширяется, хотя я нахожусь над разделом 2 или 3, это все равно технически раздел 1, поскольку он является полноширинным. Есть ли что-нибудь вокруг этого, чтобы я мог запускать другие анимации при наведении курсора на соответствующие разделы? Любая помощь очень ценится.

Спасибо

edit: для небольшого разъяснения того, как должен выглядеть идеальный конец, я был вдохновлен разделом изображений на basicagency.com ближе к концудомашней страницы.

Answer 1

Одна вещь, которую я заметил, это то, что с начальным кажется, что есть только 3, и должно быть 4, прежде чем начнется следующий раздел. Это может быть полезно попробовать.