Имеется класс hovergalery, которая написана для имитации фотогалереи на сайте (при наведении курсора, изображение увеличивается). Код CSS:
.hovergalery img{
-webkit-transform:scale(1); /*уменьшаем размер до 1*/
-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
opacity: 0.9; /*Начальная прозрачность изображений*/
margin: 0 30px 5px 0; /*Интервалы между изображениями*/
border: 2px solid #ffffff;
}
.hovergalery img:hover{
-webkit-transform:scale(3); /*увеличиваем размер до 3*/
box-shadow:0px 0px 30px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
-webkit-box-shadow:0px 0px 30px gray; /*Webkit: тени*/
opacity: 1;
}
Код HTML:
<div class="hovergalery">
<img src="22.jpg" width="20%" height="20%">
<img src="23.jpg" width="20%" height="20%">
<img src="24.jpg" width="20%" height="20%">
<img src="25.jpg" width="20%" height="20%">
</div>
Проблема:
После наведения на изображение "22.jpg" миниатюрное изображение "23.jpg" остается поверх окна просмотра изображения 22. И так далее: 23 перекрывается 24, 24 - 25 и по нарастающей. Но 25 не перекрывается предыдущими. Значит есть какая-то иерархия, но мне бы сделать выделяемое изображение приоритетным. Атрибут z-index не помогает. Может быть совет бывалых поможет, объясните пожалуйста чайнику:)
Примечание:
как раз таки в hover и добавлял, но не проходил, проблема решилась с добавлением position:relative; про него я как то не подумал, спасибо за ответы!
сайт бы кинул, но на хостах он не находится)
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.