Как полностью показать блок при наведении, если у прародителя свойство overflow: hidden?

Question

Как показать .bottom при наведении на .box, если у .wrapper свойство overflow: hidden?

Надо, чтобы было как на картинке:

section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 0;
  background: gray;
}
.row {
  display: flex;
  width: 780px;
  height: 200px;
}
.wrapper {
  display: flex;
  background: #fff;
  overflow: hidden;
}
.box-wrapper {
  position: relative;
  margin: 0 30px;
  min-width: 200px;
}
.box:hover {
  position: absolute;
}
.top {
  width: 200px;
  height: 200px;
  background: red;
}
.bottom {
  display: none;
  width: 200px;
  height: 50px;
  background: green;
}
.box:hover .bottom {
  display: block;
}

<section>
  <div class="row">
    <div class="wrapper">
      <div class="box-wrapper">
        <div class="box">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="box-wrapper">
        <div class="box">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="box-wrapper">
        <div class="box">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="box-wrapper">
        <div class="box">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="box-wrapper">
        <div class="box">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="box-wrapper">
        <div class="box">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Думаю в этом случае единственный вариант - это добавить .wrapper padding-bottom

Answer 2

1 способ

Чтобы вынести элемент за overflow: hidden;, можно воспользоваться свойством position: fixed или position: static(по умолчанию) Нужно чтобы у класса box-wrapper не было свойства position: relative(Почему так? Объяснить не могу. Опыт.)

  .box:hover .bottom {
    display: block;
    position: static; -- "Значение по умолчанию у элементов, 
используется для переопределения значения позиционирования"
  }

2 способ

Использовать бордер

section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 60px 0;
    background: gray;
  }
  .row {
    display: flex;
    width: 780px;
    height: 250px; /* Добавил высоту в 50px для бордера */
    overflow: hidden; /* Выставил hidden для row */
  }
  .wrapper {
    display: flex;
    background: #fff;
    border-bottom: 50px solid gray; /* У враппера добавил бордер, 
    чтобы не было белого пространства */
    /* overflow: hidden; */
  }
  .box-wrapper {
    position: relative;
    margin: 0 30px;
    min-width: 200px;
  }
  /* .box:hover {
    position: absolute;
  } */
  .top {
    width: 200px;
    height: 200px;
    background: red;
    border-bottom: 50px solid gray; /* Ещё один бордер, 
    нужен чтобы он не появлялся из элемента, а просто менял цвет */
  }
  /* .bottom { 
    display: none;
    width: 200px; 
    height: 50px;
    background: green;
  } */
  .top:hover{
    border-color: green; /* Меняем цвет бордера */
    transition: all .5s; /* Добавляем плавности. .5s сокращенная запись 0.5s */
  }

БЛОГ НА HUSL

Как полностью показать блок при наведении, если у прародителя свойство overflow: hidden?

Ответы (2 шт):

1 способ

2 способ