Как можно не переносить столбец, чтобы при наведении курсора на первый столбец последний столбец отображал половину контейнера?

Question

Как я могу не переносить столбец, чтобы при наведении курсора на первый столбец последний столбец отображал половину контейнера?

Я попытался сделать так, чтобы при наведении курсора на столбец класса box-hover он устанавливал 25% на flex: 0 0 50%; в моем столбце.Это работает нормально, но последний столбец оборачивается.

Я хочу, чтобы при наведении курсора box-hover последний столбец отображался вне контейнера, а последний столбец отображался наполовину и наполовину скрыт.

Я прикрепил изображениечто я пытаюсь достичьЗаранее спасибо.

Хочу:

Мой код:

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Answer 1

По умолчанию в классе "row" есть flex-wrap: wrap просто используйте класс "flex-nowrap" со строкой, и он не перенесет ваши блоки на следующую строку.Надеюсь, это поможет

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row flex-md-nowrap">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Answer 2

Здесь вы можете использовать flex-nowrap для row и при наведении курсора на меньших братьев и сестер div div и добавить переполнение: скрыто для родителя

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.container.overhidden{
  overflow:hidden;
  padding:0px 55px;
  max-width:1280px;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container overhidden">
    <div class="row flex-nowrap">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Answer 3

Вероятно, вы можете учесть отрицательную маржу для последнего столбца при наведении и скрыть переполнение:

.container {
  overflow:hidden;
}
 
.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
 /*addedd*/
 .col-md-3:last-child  {
  transition: margin 0s 0.5s; /*remove margin when the hover ends*/
}
 .box-hover:hover ~.col-md-3:last-child {
   margin-right:-30%;
  transition: margin 0s; /*add margin immediately on hover*/
 }
 /**/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Другая идея состоит в том, чтобы учесть отрицательное поле внутри и уменьшить ширину элемента, чтобы скрыть его половину:

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
  margin-right:0;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
 /*addedd*/
 .col-md-3:last-child,
 .col-md-3:last-child .box{
  transition: 0s 0.5s;
}
 .box-hover:hover ~.col-md-3:last-child {
   margin-right:-30%;
   flex-basis:12.5%!important;
   overflow:hidden;
  transition: 0s; 
 }
 .box-hover:hover ~.col-md-3:last-child .box {
   margin-right:-100%;
   transition: 0s;
 }
 /**/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>