Принесите перекрестный переход css3 на передний план с z-index

Question

Я создаю страницу портфолио для отображения некоторых изображений. Я использовал переход CSS3, чтобы развернуть миниатюру до полноразмерного изображения, когда вы наводите на него курсор, а другие большие пальцы остаются перед расширенным элементом. Я попытался использовать z-index, чтобы заставить их вернуться, но он не работает. Есть ли способ принести элемент перехода на верхний слой при расширении? Вот урезанная версия кода, который я сделал. Когда вы наводите курсор на красную рамку, я хочу, чтобы зеленый ящик оставался за расширенным красным.

CSS:

* { 
    box-sizing: border-box; 
} 
.row:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 

[class*="col-"] { 
    float: left; 
    padding: 15px; 
} 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 

.grow1{ 
    background: red; 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 50px; 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
    z-index: 1; 
    } 
.grow1:hover{ 
    background-size: contain; 
    width:150px; 
    height:70px; 
    z-index: 2; 
} 
.grow2{ 
    background: green; 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 50px; 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
    z-index: 1; 
    } 
.grow2:hover{ 
    background-size: contain; 
    width:150px; 
    height:70px; 
    z-index: 2; 
} 

HTML:

<div class="row"> 
    <div class="col-4"></div> 
    <div class="col-2"> 
     <div class="grow1"></div> 
    </div> 
    <div class="col-2"> 
     <div class="grow2"></div> 
    </div> 
    <div class="col-4"></div> 

Вот Fiddle ссылка тоже: https://jsfiddle.net/timmyll/8nef4v88/1/

Спасибо!

Answer 1

Это возможно с z-index, но оно будет работать только с элементами с абсолютным расположением. Добавьте position: absolute; в обе коробки и используйте .grow1:hover, .grow2:hover { z-index: 5; }, чтобы перенести паровую коробку спереди.

Когда ваша мышь покидает первый ящик, второй будет перед первым, пока переход все еще работает. Я не могу придумать обходное решение для CSS, чтобы избежать этого.

Answer 2

Попробуйте добавить position: absolute; я обновил свой код здесь его работы вы должны добавить свойства position «s соответственно

т.е. top: ?pxleft: ?px

.grow1{ 
    position: absolute; 
    background: red; 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 50px; 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
    z-index: 1; 
    } 
.grow1:hover{ 
    background-size: contain; 
    width:150px; 
    height:70px; 
    z-index: 999; 
} 
.grow2{ 
    position: absolute; 
    background: green; 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 50px; 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
    z-index: 2; 
    } 
.grow2:hover{ 
    background-size: contain; 
    width:150px; 
    height:70px; 
    z-index: 1; 
} 

Answer 3

Добавить преобразование и она будет работать

.grow1:hover{ 
    transform: translateZ(0px); 
} 

Чтобы сохранить работу зависание, я добавил переход: transform.

И показать, что второй элемент также работает, и я сделал в ней translateX

* { 
 
    box-sizing: border-box; 
 
} 
 
.row:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%;} 
 
.col-9 {width: 75%;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
.grow1{ 
 
\t background: red; 
 
\t background-size: contain; 
 
\t background-repeat: no-repeat; 
 
\t width: 100px; 
 
\t height: 50px; 
 
\t -webkit-transition: width 1s, height 1s; 
 
\t transition: width 1s, height 1s, transform 1s; 
 
\t z-index: 1; 
 
\t } 
 
.grow1:hover{ 
 
\t background-size: contain; 
 
\t width:150px; 
 
\t height:70px; 
 
\t z-index: 2; 
 
    transform: translateZ(0px); 
 
} 
 
.grow2{ 
 
\t background: green; 
 
\t background-size: contain; 
 
\t background-repeat: no-repeat; 
 
\t width: 100px; 
 
\t height: 50px; 
 
\t -webkit-transition: width 1s, height 1s; 
 
\t transition: width 1s, height 1s, transform 1s; 
 
\t z-index: 1; 
 
\t } 
 
.grow2:hover{ 
 
\t background-size: contain; 
 
\t width:150px; 
 
\t height:70px; 
 
\t z-index: 2; 
 
    transform: translateX(-50px); 
 
}

<div class="row"> 
 
    <div class="col-4"></div> 
 
    <div class="col-2"> 
 
     <div class="grow1"></div> 
 
    </div> 
 
    <div class="col-2"> 
 
     <div class="grow2"></div> 
 
    </div> 
 
    <div class="col-4"></div>