将鼠标悬停在文本叠加上时触发横幅的模糊效果

Question

我刚刚用横幅照片（两个注射器）自定义了我的博客，当它悬停时，照片会模糊并显示链接。然而，文本容器位于照片上方，导致照片不模糊。我想知道是否有任何解决方案可以触发重叠的照片并同时显示链接？
（图像模糊->未悬停时显示链接和反向）
实时预览

CSS

#banner-container {
            display:block;
            position:relative;
         }
         #banner-container img {
            width:375px;
            margin-top:24px;
            margin-bottom:24px;
            position:center;
         }
         #text-container {
             position:absolute;
             margin-top:23px;
             margin-left:62px;
             top:0;
             left:0;
             width:375px;
             height:234px;
             display: flex;
             align-items: center;
             justify-content: center;
             filter: blur(30px);
             transition: all 0.2s ease-out;
         }
         #text-container:hover {
             filter: none;
             transition: all 0.2s ease-in;
         }

HTML

<div id="banner-container"><img src="https://static.tumblr.com/siia3cb/0frs4664t/diacetyl.png">
                    <div id="text-container">
                    <a href="https://diangeloalvaro.tumblr.com" target="_blank">follow me on tumblr</a>&emsp;
                    <a href="https://sk5p4qqqqqqqqq.tumblr.com" target="_blank">background credit</a>
                </div>
                </div>

Answer 1

您正在模糊整个容器和内容...您不应该模糊图像吗？

#banner-container {
  display: inline-block;
  position: relative;
}

#banner-container img {
  width: 375px;
  display: block;
  filter: blur(0px);
  transition: all 0.2s ease-out;
}

#text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
}

#banner-container:hover img {
  filter: blur(30px);
  transition: all 0.2s ease-in;
}

<div id="banner-container"><img src="https://static.tumblr.com/siia3cb/0frs4664t/diacetyl.png">
  <div id="text-container">
    <a href="https://diangeloalvaro.tumblr.com" target="_blank">follow me on tumblr</a>&emsp;
    <a href="https://sk5p4qqqqqqqqq.tumblr.com" target="_blank">background credit</a>
  </div>
</div>