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

Question

[maralov]

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

<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 
}

я сделал что-то типа такого, но как рассчитать ширину, чтобы она не сильно "залазила за экран" тем самы растягиваясь.

Comments

[Ankhena]

Как ограничить контентную часть только с одной стороны?

[maralov]

Ankhena, не совсем понимаю как это поможет? есть колонка, внутри блок с фоновой картинкой и оверлеем позиционирован абсолютно, поверх него блок с контентом ... то есть блок с фоном нужно прижать к правой стороне (или девой соответственно) и растянуть его к левому краю экрана за контейнер?

[Ankhena]

maralov, Так чтоль https://jsfiddle.net/kwe0oxcf/ ?

[maralov]

Ankhena,

<div class="container">
  <div class="row ">
     <div class="col-12 col-sm-6 col-xl-7">
          <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">
          <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 
}

я сделал что-то типа такого, но как рассчитать ширину, чтобы она не сильно "залазила за экран" тем самы растягиваясь.

[Ankhena]

maralov, Посчитать через calc.
Ширина контента фиксирована. Сколько колонок вы знаете.
Из 50% вычитайте фиксированную часть.

И зачем вы делаете пустые бессмысленные блоки, если для этого придуманы псевдоэлементы?

[maralov]

Ankhena, они очень даже не бессмысленные - фоновую картинку будут менять из админки ВП. по этому этим блокам будут заданы инлайновые background-image, а cover уже сделан псевдоэлементом...

ща попробую calc поиграться

[maralov]

Ankhena, но почему 50% вы говорите ... ведь левая сторона больше правой....

ну вот я никак не пойму, что вы хотите донести...

Экран 1440 px
Контейнер 1300 px
Правая сторона занимает 5 колонок = приблиз 540px
Левая 7 колонок = 758 приблиз
50vw (720px) - виксированая ширина 540px = выходит как-то мало

[Ankhena]

maralov, во-первых, потому что геометрия, во-вторых, потому что мне так удобнее.
Можете считать по-другому.

[maralov]

Ankhena, какая геометрия? 50% в данном примере = 50% ширины родителя же...

[Ankhena]

maralov, если вы перестанете считать от фиксированного container, а сделаете релативом container-fluid или как он там по-бутстраповски, то жить станет легче.

В вашем случае придется считать не через %, а через vw. И потом обрезать лишнее.

[maralov]

Ankhena, а как в таком случае контент мне рассчитать на 5 и 7 колонок как в макете ? колонки то в % от container рассчитываются

[Ankhena]

maralov, засуньте container внутрь флюида.

Не знаю на кой черт там бутстрап приплетать, который должен упрощать жизнь.

[Ankhena]

maralov, 5 и 7 колонок https://jsfiddle.net/dvnhp1y7/
Картинки точно также повесите абсолютом с z-index -1.

[maralov]

Ankhena, нуу он в проекте используется - не я решаю какие технологии юзать ))

[Ankhena]

maralov, это же не значит, что нельзя писать свои классы или решать каким способом делать тот или иной блок.

Ну или городите контейнер внутри флюида.

Answer 1

[DrWeyber]

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

Comments

[DrWeyber]

У тебя картинка та что на background, должна иметь фиксированную высоту и ширину, что-то типо, width 50vw, height 100vh,и вытолкать её margin ами

[maralov]

DrWeyber, а почему 50? ведь одна левая часть занимает 7 колонок а правая 5, ниже 1200 пкс они станут по 50%

[DrWeyber]

maralov, твоя правда, тогда делай через классы бустрапа, col-7 и col-5 соответственно. Но с bg тебе придётся попотеть, я попробую сделать через 15 мин, когда то сталкивался с таким

[maralov]

DrWeyber,

<div class="container">
  <div class="row ">
     <div class="col-12 col-sm-6 col-xl-7">
          <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">
          <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 
}

я сделал что-то типа такого, но как рассчитать ширину, чтобы она не сильно "залазила за экран" тем самы растягиваясь.

[Aetae]

maralov, width: 100% и родителю position: relative, в чём проблема то?

[DrWeyber]

maralov, сейчас, я вот пытаюсь повторить когда-то уже мною деланное)

[maralov]

Aetae, проблема в том, что родитель - это колонка, она ограничена контейнером

[Aetae]

maralov, логично. Ничто не должно вылезать за контейнер. Если у вас иначе - вы используете контейнер неправильно.

[maralov]

Aetae, а как же его тут не использовать? или использовать правильнее?
обратите внимание на левую часть там приведет пример наведения, для использования ховера все элементы которые задействованы ховером должны быть в одном родителе...

[DrWeyber]

maralov, короче хрен его знает, то что я делал там была картинка - текст, и они были как бы контейнере но их bg выпадали, делай на абсолюте и не мучайся)

[maralov]

DrWeyber, метод найчного "тыка" вышло так тчо на экрана от 1200 до 2560 адекватно смоттрятся при таком решении...не знаю на сколько но верно )) когда колонки становятся по 50% - то по 50vw ...

.bg-v-cover-block--left {
    right: 0;
    width: calc(46vw + 25%);
}

.bg-v-cover-block--right {
    left: 0;
    width: calc(50vw - 20%);
}

@media screen and (max-width: 1200px) {
  .bg-v-cover-block--left, 
  .bg-v-cover-block--right{
      width: 50vw;
 }
}

[maralov]

DrWeyber, ахаха спс, братан за участие, так и решил вопрос)))) быть добру)

[DrWeyber]

maralov, или можно сделать костылём, у тебя получается каждая секция главна, это будет row, в котором будет col-7 col-5, в котором будет row, в котором будет col-6, и так с двух сторон и одному делаешь justify-content-end, а второму start, а двум блока родителям даёшь bg

[maralov]

DrWeyber, о_О эм...

[DrWeyber]

maralov, ну это если не хочешь делать абсолютом, таким образом ты как бы блоки в центр вжимаешь, но по факту там в сумме 12 колонок, и будет у тебя контейнер в центре, но это как 1 из вариантов)

Примерно так я это вижу

spoiler

[DrWeyber]

Aetae, не всегда, иногда можно выдавить за контейнер