Javascript-форум - Работа со слоями

Здравствуйте, у меня есть 9 изображений распложенных в ряд, к которым применены свойства:

transform: scale(4);

transform-origin: 30% -10% 0

<div class="yacheyka9"> </div>
.yacheyka9{
            width: 300px;
            height: 200px;
            background: url("imgOlefirivka/yache9.jpg") no-repeat;
            background-size: contain;
            float: left;
        }
        .yacheyka9:hover{
            -ms-transform: scale(4); /* IE 9 */
            -webkit-transform: scale(4); /* Safari 3-8 */
            transform: scale(4);
            transform-origin: 30% -10% 0;
        }

Суть задачи в том что бы при наведении курсора мыши на то изображение которое увеличивается оно всегда было с наибольшим z-index и перекрывало собой всё остальное. Ну или не z-index может есть другой способ. Спасибо.