Trigger banner's blur effect while hover on text overlay

November 23, 2023

I’ve just customizing my blog with a banner photo (the two syringes) 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)
Live preview

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>

>Solution :

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>