HTML

<!doctype html>
<html>
  <body>
    <div class="hs-slider">
      <div
        class="hs-column active"
        style="
          z-index: 1;
          background-image: url(./pexels-kdjproductions-1557980.jpg);
        "
      >
        <h2 class="rotated-title">CHANEL</h2>
        <div class="box">
          <h2 class="title">CHANEL</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </div>
      </div>
      <div
        class="hs-column"
        style="
          z-index: 2;
          background-image: url(./pexels-roman-koval-428095504-15271715.jpg);
        "
      >
        <h2 class="rotated-title">WONDER ROSE</h2>
        <div class="box">
          <h2 class="title">WONDER ROSE</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </div>
      </div>
      <div
        class="hs-column"
        style="z-index: 3; background-image: url(./pexels-valeriya-1961792.jpg)"
      >
        <h2 class="rotated-title">AQUA</h2>
        <div class="box">
          <h2 class="title">AQUA</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </div>
      </div>
      <div
        class="hs-column"
        style="z-index: 4; background-image: url(./pexels-valeriya-1961795.jpg)"
      >
        <h2 class="rotated-title">DOLCE</h2>
        <div class="box">
          <h2 class="title">DOLCE</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.hs-slider {
    width: 80%;
    height: 100vh;
    display: flex;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.hs-slider .hs-column {
    width: 60px;
    height: 100%;
    position: relative;
    top: 0;
    transition: all 0.8s ease;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.hs-column .rotated-title {
    position: absolute;
    top: 0;
    right: 0;
    writing-mode: vertical-lr;
    z-index: 3;
    cursor: pointer;
    background-color: #fff6;
    backdrop-filter: blur(10px);
    margin: 0;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hs-column .box {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 3;
    width: 40%;
    padding: 60px 30px;
    background-color: #fff6;
    backdrop-filter: blur(5px);
    border-radius: 25px;
    visibility: hidden;
    opacity: 0;
}

.hs-column.active .box {
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease;
    transition-delay: 0.8s;
}

.box p {
    line-height: 1.5;
}

JS

var columns = document.querySelectorAll(".hs-column");
if (columns && columns.length > 0) {
  columns[0].style.width = "calc(100% - " + (columns.length - 1) + "px)";
  columns.forEach((element) => {
    element.addEventListener("mouseenter", function () {
      columns.forEach((column) => {
        column.classList.remove("active");
        column.style.width = "60px";
      });
      element.classList.add("active");
      element.style.width = "calc(100% - " + (columns.length - 1) + "px)";
    });
  });
}