Div Wrapper для изображения, содержащего текст, не может одновременно изменять фильтр яркости на изображении И изменять фильтр непрозрачности для текста

Question

Вот мой код:

HTML

<div id="featuredWrapper">
    <div id="featuredContentWrapper">
        <div class="ContentThumbnail">
            <a>
                <div class="ContentThumbnailCaption">
                    <h3>Lorem</h3>
                    <p>Ipsum</p>
                </div>
                <img src="https://i.picsum.photos/id/1/200/300.jpg" class="ContentThumbnailImage" />

            </a>
        </div>
    </div>
</div>

CSS

 #featuredWrapper
    {
        /*SETUP*/
        display:inline-block;
        margin-left:13.85%;
        margin-right:13.85%;
        width:72.3%;
        /*BORDER*/
        border-bottom: solid 1px gray;
        /*ANIMATION*/
        transition: 0.3s;
    }
    #featuredContentWrapper
    {
        /*SETUP*/
        text-align:center;
    }
    .ContentThumbnail
    {
        /*SETUP*/
        display:inline-block;
        height: 30%;
        width: 22.5%;
        margin: 2% 4% 2% 4%;
        /*VISUAL*/
        background-color:aqua;
        /*ANIMATION*/
        transition: 0.3s;
    }
     .ContentThumbnail:hover .ContentThumbnailCaption
    { 
       /*VISUAL*/
       filter:opacity(100%);
    }
    .ContentThumbnail:hover .ContentThumbnailImage
    {
       /*VISUAL*/
       filter:brightness(50%);
    }      
    .ContentThumbnail a
    {
        /*SETUP*/
        display:inline-block;
        position:relative;
    }
    .ContentThumbnailImage
    {
        /*SETUP*/
        display:inline-block;
        height: 100%;
        width: 100%;
    }
    .ContentThumbnailCaption
    {
        /*SETUP*/
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*VISUAL*/
        color:white;
        filter:opacity(0);
        /*ANIMATION*/
        transition:0.3s;         
    }

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

Я пытался изменение механизмов, используемых для выполнения обоих эффектов, например, использование видимости CSS вместо фильтров. Я еще не пробовал JavaScript, но хотел бы сохранить этот эффект в пределах CSS.

Answer 1

Изменено для нижеуказанных css

 .ContentThumbnail:hover .ContentThumbnailCaption
{ 
   /*VISUAL*/
   filter:opacity(100%);z-index:1;
}

#featuredWrapper {
  /*SETUP*/
  display: inline-block;
  margin-left: 13.85%;
  margin-right: 13.85%;
  width: 72.3%;
  /*BORDER*/
  border-bottom: solid 1px gray;
  /*ANIMATION*/
  transition: 0.3s;
}

#featuredContentWrapper {
  /*SETUP*/
  text-align: center;
}

.ContentThumbnail {
  /*SETUP*/
  display: inline-block;
  height: 30%;
  width: 22.5%;
  margin: 2% 4% 2% 4%;
  /*VISUAL*/
  background-color: aqua;
  /*ANIMATION*/
  transition: 0.3s;
}

.ContentThumbnail:hover .ContentThumbnailCaption {
  /*VISUAL*/
  filter: opacity(100%);
  z-index: 1;
}

.ContentThumbnail:hover .ContentThumbnailImage {
  /*VISUAL*/
  filter: brightness(50%);
}

.ContentThumbnail a {
  /*SETUP*/
  display: inline-block;
  position: relative;
}

.ContentThumbnailImage {
  /*SETUP*/
  display: inline-block;
  height: 100%;
  width: 100%;
}

.ContentThumbnailCaption {
  /*SETUP*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*VISUAL*/
  color: white;
  filter: opacity(0);
  /*ANIMATION*/
  transition: 0.3s;
}

<div id="featuredWrapper">
  <div id="featuredContentWrapper">
    <div class="ContentThumbnail">
      <a>
        <div class="ContentThumbnailCaption">
          <h3>Lorem</h3>
          <p>Ipsum</p>
        </div>
        <img src="https://i.picsum.photos/id/1/200/300.jpg" class="ContentThumbnailImage" />

      </a>
    </div>
  </div>
</div>