z-index в переходах webkit

Question

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

Проблема возникает, когда среди элементов div сложены вместе, когда элемент div приходитсначала в порядке наведения, он частично перекрывает свой преемник div (с уменьшенной непрозрачностью) из-за масштабирования

вот пример кода html

<div id="div1" class="tile">Content 1</div>
<div id="div2" class="tile">Content 2</div>
<div id="div3" class="tile">Content 3</div>

css

    .tile{
    width:100px;
    margin:6px;
    float:left;
    height:100px;
    margin-right:0px;
    margin-bottom:0px;
    -webkit-transition: all .1s ease-in-out .1s; 
    -moz-transition: all .1s ease-in-out .1s;   
    }
     .tile:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -moz-box-shadow: 0 0 3px 1px #fff;
    -webkit-box-shadow: 0 0 3px 1px #fff;
    box-shadow: 0 0 3px 1px #333;

     }

и jquery

    function tile_mouseover()
    {
    $(this).siblings('.tile').stop(true,true).animate({'opacity':'0.5'},300);
    $(this).stop(true,true).animate({opacity:1},200)
    }

При реализации вышеприведенного кода, когда div1 наведен, его масштабируется и перекрывается div2.

Какие-либо возможные решения?

Answer 1

Я думаю, что это должно работать.

.tile {
  position: relative;
}
.tile:hover{
  z-index:2;
}

Answer 2

вы дважды объявляете маржу для вашего .tile класса, исправьте это так:

.tile{
width:100px;
margin:6px;
float:left;
height:100px;
-webkit-transition: all .1s ease-in-out .1s; 
-moz-transition: all .1s ease-in-out .1s;   
}