Отключить кликабельный элемент только внутри области div

Question

У меня есть уменьшенное изображение, на котором есть элемент наложения (скользит вверх). при нажатии на фоновое изображение должно открыться лайтбокс (что делает). когда вы щелкаете по оверлею div, он открывает отдельный модал. Проблема заключается в следующем: когда я щелкаю по оверлею div, открываются и лайтбокс, и модал. Я думаю, что это сложно объяснить, но я хотел бы знать, как отключить щелчок по оранжевому блоку div

Использование пустой ссылки не будет работать в этом случае. Когда я делаю это, лайтбокс дублирует изображения.

        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(47, 74, 102, .6);
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
          cursor: pointer;
          display: block;
        }

        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
          cursor: pointer;
          display: block;
        }

        .imagetext:hover .overlay {
          height: 100%;
        }

        .mySlides {display:none;}

        .overlaytitle {
          margin-top: 1rem;
            color: white;
          opacity: 1.0;
            font-size: 1rem;
            position: absolute;
          font-family: oswald;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
            width: 100%;
            padding-top: 1rem;
        }


        .overlaysubtitle {
            color: white;
          font-family: lato;
          font-size: 12px;
          font-style: italic;
        }

        .fullproj{
          background-color: #f17e5a;
            bottom: 0;
          align-content: center;
            height: 30%;
            line-height: 30%;
          padding-top: 7%;
          width: 100%;
          text-align: center;
          font-family: oswald;
          color: white;
          text-decoration: none;
          font-size: 14px;
            position: absolute;
            z-index: 1;
        }


        .modalbutton{
            width: 100%;
            height: 30%;
            background-color: #f17e5a;
            text-decoration: none;
            color: white;
            font-size: 1rem;
            bottom: 0;
            position: absolute;
            border:none;
            font-family: oswald;
            font-weight: thin;
            cursor: pointer;

        }


        .modalbutton:hover{
            background-color:#bb5c5a;
        }

        <div class="responsive brands">
          <div class="gallery">
             <div class="imagetext"> 
              <a href="mpimg/viva/box.png" alt="Viva Lifestyle Box and Bar" rel="lightbox1" data-lightbox="example-set"  title="Viva Lifestyle Box and Bar">
                <div class="overlay">
                  <div class="overlaytitle">Viva Lifestyle<br>
                    <div class="overlaysubtitle">Branding</div><br>
                  </div> 
                            <button class="modalbutton"><a href="#">VIEW FULL PROJECT</a></button>
                        </div>   
                <img src="Img/portfolio/Branding/viva.png" alt="EXAMPLE IMG" width="600" height="400" class="image">	
              </a>
                </div>
            </div>
          </div>

Answer 1

Вы можете сделать это css

.modalbutton {
  pointer-events: none;
}