包含文本的图像的包装 div 无法同时更改图像上的亮度滤镜和更改文本上的不透明度滤镜

Question

这是我的代码：超文本标记语言<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>