2 DIVS перекрываются с эффектом масштабирования

Я пытаюсь создать веб-сайт практики с Bootstrap 4 (это мой первый раз, используя его). Я придумал проблему в макете, которую я разрабатываю, и, вероятно, что-то действительно простое, но я не могу это исправить.2 DIVS перекрываются с эффектом масштабирования

<div id="box-container" class="container-fluid"> 
    <div id="box-row" class="row"> 
     <div id="header-box1" class="col-lg-6 header-box"> 
     </div> 
     <div id="header-box2" class="col-lg-6 header-box"> 
     </div> 
    </div> 
</div>

Full demo | Full code (проигнорируйте изображения, они все просто заполнители)

Просмотрите полную демонстрационную версию, и вы заметите, что у меня есть 2 коробки, на которые я наложил эффект изменения масштаба. Левый блок работает точно так, как должно быть, однако правый перекрывает левый. Я знаю, что это что-то простое, но я просто наклоняю голову вокруг него.

Любые советы? Cheers

источник

2017-02-16 jkarakizi

Установить 'z-index' на 1 для обоих и при наведении сделать это 2. – Skylark

@OfficialAntarctica Это не сработало :( – jkarakizi

Скопируйте код с http://stackoverflow.com/a/42262836/3798034, протестировать его и он работает. – Skylark

Вы ищете изменение размера фона.

.header-box { 
    background-position: center; 
    background-size:100%; 
    transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 
.header-box:hover{ 
    background-size:150%; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
}

источник

2017-02-16 00:45:34 Skylark

OP сказал, что это не сработает. И они не хотят, чтобы элемент появлялся над другим, когда он масштабируется, а более высокий индекс z-index при наведении заставит его отображаться поверх другого элемента. –

Я попробовал копия вашего точного кода, и для меня все было одинаково. – jkarakizi

@jkarakizi Хорошо, я неправильно понял, что вы хотели - попробуйте сейчас. – Skylark

Перемещение дивы с фонами в ваших самозагрузки Col элементов, установите overflow: hidden; на бутстраповских перевалы, а затем установить элементы коробки для position: absolute; top: 0; left: 0; right: 0; bottom: 0;

#header-box1 { 
 
    background-image: url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg); 
 
} 
 

 
#header-box2 { 
 
    background-image: url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg); 
 
} 
 

 
#box-row { 
 
    height: 250px; /* you don't need to modify this */ 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 

 
.header-box { 
 
    background-position: center; 
 
    transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -webkit-transition: transform 1s ease; 
 
    -o-transition: all 1s ease; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.header-box:hover { 
 
    transform: scale(1.5); 
 
    -moz-transform: scale(1.5); 
 
    -webkit-transform: scale(1.5); 
 
    -o-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; 
 
    filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); 
 
} 
 

 
#box-row > .col-lg-6 { 
 
    overflow: hidden; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div id="box-container" class="container-fluid"> 
 
    <div id="box-row" class="row"> 
 
    <div class="col-lg-6"> 
 
     <div id="header-box1" class="header-box"></div> 
 
    </div> 
 
    <div class="col-lg-6"> 
 
     <div id="header-box2" class="header-box"></div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-02-16 00:52:52

Поместите Div из каждое изображение в другом div, и переполнение потока равно никому. убедитесь, что z-индекс внешнего div выше.

источник

2017-02-16 00:53:54 user2777173

2 DIVS перекрываются с эффектом масштабирования

ответ

Смежные вопросы