包含文本的图像的包装 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&nbsp;.ContentThumbnail:hover .ContentThumbnailCaption{&nbsp;&nbsp; &nbsp;/*VISUAL*/&nbsp; &nbsp;filter:opacity(100%);z-index:1;}#featuredWrapper {&nbsp; /*SETUP*/&nbsp; display: inline-block;&nbsp; margin-left: 13.85%;&nbsp; margin-right: 13.85%;&nbsp; width: 72.3%;&nbsp; /*BORDER*/&nbsp; border-bottom: solid 1px gray;&nbsp; /*ANIMATION*/&nbsp; transition: 0.3s;}#featuredContentWrapper {&nbsp; /*SETUP*/&nbsp; text-align: center;}.ContentThumbnail {&nbsp; /*SETUP*/&nbsp; display: inline-block;&nbsp; height: 30%;&nbsp; width: 22.5%;&nbsp; margin: 2% 4% 2% 4%;&nbsp; /*VISUAL*/&nbsp; background-color: aqua;&nbsp; /*ANIMATION*/&nbsp; transition: 0.3s;}.ContentThumbnail:hover .ContentThumbnailCaption {&nbsp; /*VISUAL*/&nbsp; filter: opacity(100%);&nbsp; z-index: 1;}.ContentThumbnail:hover .ContentThumbnailImage {&nbsp; /*VISUAL*/&nbsp; filter: brightness(50%);}.ContentThumbnail a {&nbsp; /*SETUP*/&nbsp; display: inline-block;&nbsp; position: relative;}.ContentThumbnailImage {&nbsp; /*SETUP*/&nbsp; display: inline-block;&nbsp; height: 100%;&nbsp; width: 100%;}.ContentThumbnailCaption {&nbsp; /*SETUP*/&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; transform: translate(-50%, -50%);&nbsp; /*VISUAL*/&nbsp; color: white;&nbsp; filter: opacity(0);&nbsp; /*ANIMATION*/&nbsp; transition: 0.3s;}<div id="featuredWrapper">&nbsp; <div id="featuredContentWrapper">&nbsp; &nbsp; <div class="ContentThumbnail">&nbsp; &nbsp; &nbsp; <a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="ContentThumbnailCaption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Lorem</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Ipsum</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.picsum.photos/id/1/200/300.jpg" class="ContentThumbnailImage" />&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; </div></div>