這是我的代碼：超文本標記語言<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 中保留這種效果。