干得好！你遇到这个问题是因为CSS的固有工作方式：当你对父元素应用样式时，它自然会影响到它内部的所有子元素。这包括你添加的任何过滤器或效果。

以下是我的建议：

为了解决这个问题，我们应该引入一种“中介”元素。在本例中，我使用.blog-container::before来动态生成一个额外的元素。（您可以在MDN doc's - CSS ::before中阅读更多关于这种方法的信息）。
我们需要确保我们在与其他子元素（如标题和描述）相同的层次结构中应用视觉更改。
这个::before元素被设置为position: absolute，而它的父元素.blog-container是position: relative;。这允许我们独立于文档流来定位::before元素。（MDN Doc's - CSS Position）
然后，我们确保这个伪元素覆盖了整个父元素（请参阅Sniper）。不要忘记在父元素上设置overflow: hidden以防止任何溢出。
现在我们已经完成了，我们可以针对::before元素的悬停效果来告诉它当元素悬停时该做什么;独立于其他子元素。-Magic！
最后，我们整理了堆叠顺序。我们通过调整z-index属性来实现这一点。我们设置了::before元素的z索引和您希望显示在顶部的文本元素。这确保了文本始终可见并且不受背景效果的影响。

.blog-container {
    height: 400px;
    position: relative;
    display: inline-block;
    color: #fff;
    width: 280px;
    background-size: 100% 100%;
    border: 1px solid #000;
    border-radius: 20px;
    background-image: url("https://images.unsplash.com/photo-1688297969967-302de9c8bd5b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    overflow: hidden; /* Added to contain the pseudo-element */
}

.blog-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: brightness(55%) saturate(140%);
    transition: opacity 0.5s ease;
    opacity: 0;
    z-index: 1;
}

.blog-container:hover::before { /* The magic line */
    opacity: 1;
}

.blog-container:hover {
    cursor: pointer;
    transition: 0.5s;
}

.blog-title, .blog-desc {
    width: 260px;
    position: absolute;
    bottom: 8px;
    left: 18px;
    opacity: 0;
    z-index: 2; /* Ensure text is above the overlay */
}

.blog-title {
    font-weight: 200;
    font-size: 25px;
    bottom: 45px;
}

.blog-container:hover .blog-title {
    -webkit-animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards;
}

.blog-container:hover .blog-desc {
    -webkit-animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

@-webkit-keyframes slide-up {
    0% { -webkit-transform: translateY(80%); opacity: 1 }
    100% { -webkit-transform: translateY(0); opacity: 1 }
}

个字符