Масштаб (увеличение) эскиза при наведении курсора с CSS3 и проблема с осью z javascript

Я пытаюсь создать серию миниатюр, которые увеличиваются при наведении курсора. Моя предварительная сборка выполняет часть увеличения / масштабирования с помощью преобразования CSS3: масштабирование и упрощение. Проблема в том, что они перекрывают друг друга, потому что имеют общую ось Z.

Может ли кто-нибудь помочь мне в создании дополнения к этому сценарию на JavaScript, которое правильно позиционирует каждую миниатюру по оси Z, которая имеет смысл, то есть каждое увеличенное изображение изменяет размеры, чтобы они располагались поверх друг друга.

Демонстрация на моем веб-сайте здесь: демо Обновлено: Решено

Предварительный просмотр кода:

html:

css:

#main div.hover {
position: relative;
z-index:200;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #297ab1;}

#main div.hover:hover, #main div.hover_effect {
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5);
-o-transform:scale(1.5, 1.5);
-ms-transform:scale(1.5, 1.5);
transform:scale(1.5, 1.5);}

скрипт:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Итак, эта страница использует этот скрипт для переключения класса hover_effect, который увеличивает масштаб div до 150%.

Решение: z-index:999

Также есть идеи по установке задержки в начальный центр мыши без setTimeOut?

Любые предложения и решения приветствуются!

p.s. В этой демонстрации используется модифицированная версия галереи изображений каменной кладки.

Спасибо.