Мои элементы наведения для непрозрачности и z-index не работают - PullRequest
Новая
       21

Мои элементы наведения для непрозрачности и z-index не работают

0 голосов
/ 01 октября 2018

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

    <div class="right">
       <div class="photos" id="outdoors">

            <div id="pop-up">
            <img src="img/outdoors/out2.jpg">
            </div>
          </div>

А вот CSS: 

    #pop-up{
      width:auto;
      height: auto;
      perspective: 130 px;
      position: relative;
    }

    #pop-up img {
      position: relative;
      transition: 100ms;
      box-shadow: 0px 0px 0px rgba(0,0,0,0);
      z-index:1;
    }

    .photos:hover{
     opacity: 0.2;
    }

    .photos:hover #pop-up:hover img{
      transform: translate3d(0px,60px,60px);  
      box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
      z-index: 9999;
      opacity: 1.0;
    }
...