Я пытаюсь создать серию миниатюр, которые увеличиваются при наведении.Моя предварительная сборка выполняет часть увеличения / увеличения с помощью CSS3-преобразования: масштабирование и простота извлечения.Проблема в том, что они перекрывают друг друга, потому что у них одна ось Z.
Может ли кто-нибудь помочь мне в создании дополнения javascript к этому сценарию, которое правильно размещает каждый эскиз на оси z, что имеет смысл, т.е.каждое увеличенное изображение изменяет размеры, чтобы быть поверх другого изображения.
Демонстрация на моем сайте здесь: демо Обновлено: Решено
Предварительный просмотр кода:
html:
<div style="position: absolute;" class="item hover">
<a href="#"><img alt="two" src="img/posts.png"></a>
</div>
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?
Любые предложения и решения наиболее приветствуются!
ps В этой демонстрации используется модифицированная версия галереи изображений кладки.
Спасибо.