<div class="content">
  <div class="products">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">
          <div class="wrapper">
            <div class="top">
              TOP
            </div>
            <div class="bottom">
              BOTTOM
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="wrapper">
            <div class="top">
              TOP
            </div>
            <div class="bottom">
              BOTTOM
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="wrapper">
            <div class="top">
              TOP
            </div>
            <div class="bottom">
              BOTTOM
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="wrapper">
            <div class="top">
              TOP
            </div>
            <div class="bottom">
              BOTTOM
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="wrapper">
            <div class="top">
              TOP
            </div>
            <div class="bottom">
              BOTTOM
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="banner">
    <a href="#">
      LINK LINK LINK LINK LINK LINK LINK LINK LINK
    </a>
  </div>
</div>

.products,
.slider-box,
.slider,
.top,
.slide:hover .bottom,
.banner {
  display: flex;
}
.content,
.products {
  width: 600px;
}
.bottom {
  display: none;
}
.products {
  position: relative;
}
.slider-box {
  overflow-x: scroll;
}
.slide {
  width: 150px;
  margin: 10px;
}
.wrapper {
  border: 1px solid black;
  box-sizing: border-box;
}
.slide:hover .wrapper {
  width: 150px;
  position: absolute;
}
.top {
  height: 80px;
  background: gold;
}
.top,
.bottom,
.banner {
  align-items: center;
  justify-content: center;
}
.bottom {
  height: 50px;
  background: blue;
}
.banner {
  height: 150px;
  background: gray;
}