maralov
@maralov
фронт-джун

Как сверстать данный блок?

Прошу помощи, как сверстать данный блок?
при наведении на левую часть затемнение пропадает и контент в колонке появляется. загвоздка в том что сам контент в ограничен контейнером...в проекте используется сетка бутстрапа

5f84af9dca82e032280115.jpeg

<div class="container">
  <div class="row ">
     <div class="col-12 col-sm-6 col-xl-7 position-relative">
          <div class="bg-v-cover-block bg-v-cover-block--left"></div>
          <div class="content-block"> text text txt</div>
     </div>
     <div class="col-12  col-sm-6 col-xl-5 position-relative">
          <div class="bg-v-cover-block bg-v-cover-block--right"></div>
          <div class="content-block"> text text txt</div>
     </div>
  </div>
</div>


.bg-v-cover-block {
    position: absolute;
    top: 0;
    height: 100%;
    z-index:0
}
.bg-v-cover-block--left {
    right: 0;
    width: ???? vw 
}

.bg-v-cover-block--right {
    left: 0;
    width: ???? vw 
}


я сделал что-то типа такого, но как рассчитать ширину, чтобы она не сильно "залазила за экран" тем самы растягиваясь.
  • Вопрос задан
  • 144 просмотра
Пригласить эксперта
Ответы на вопрос 1
@DrWeyber
Ну как, ты можешь сделать before и after,навестить их абсолютом над 2 блоками который будут занимать по 50%, и в которых весь твой контент. Затем псевдоэлементам даёшь pointer-events:none, и через hover на блок с 50%, убираешь before через opacity, я бы так попробовал
А то что бутстрап сетка, так это всего лишь сетка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы