Trigger banner's blur effect while hover on text overlay

Question

I've just customizing my blog with a banner photo that when it's being hovered, the photo will blurred out and display the link. However, the text container was on top of the photo, causing it not to be blurred. I'm wondering if there are any solutions that will trigger the overlaid photo and show the link at the same time?
(image blurred -> shows link and reverse when not being hovered)

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="">
                    <div id="text-container">
                    <a href="" target="_blank">follow me</a>&emsp;
                    <a href="" target="_blank">credit</a>
                </div>
                </div>

Answer 1

You are blurring the whole container and contents... shouldn't you just blur the image?

#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>