Hover on link - background should get blurred but not the text

Question

Everything is working fine with my code, except that when I hover over my link, the animation cuts off. I don't know how to fix the problem so that, when I hover over the link, the background should blur and do it's animation as I've already written.

HTML:

<div class="class">
    <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
         <a href="#">
            <div class="text">
               <h3>goalkeepers</h3>
            </div>
         </a>
</div>

CSS:

.class{
width:50%;
height:21vw;
float:left;
overflow: hidden;
position: relative;
transition: ease-in-out 0.55s;
}

.class img{
width:100%;
height:120%;
margin-top:-3.5vw;
transition: ease-in-out 0.55s;
}

.class img:hover{
-webkit-filter: blur(10px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform:scale(1.05);
}

.text h3{
margin-top:0;
margin-left:0;
text-align: center;
font-variant: small-caps;
font-weight: 100;
font-size: 2.9vw;
font-family: montserratlight;
}

.text {
 width: auto;
 height: auto;
 margin: 0;
 position: absolute;
 top: 50%;
 left:50%;
 transform: translate(-50%, -50%);
 padding-bottom: 0.1vw;
 display: inline-block;
 }

 .text:after {
 content: "";
 display: block;
 margin: auto;
 height: 0.15vw;
 width: 0px;
 background: transparent;
 transition: width 0.55s ease, background-color 0.55s ease;
 }

 .class:hover > a .text:after {
  width: 100%;
  background: white;
  }

The fiddle

Answer 1

Firstly, move the <img> tag after the anchor tag <a> in the html dom

<div class="class">

  <a href="#" class="hoverme">
    <div class="text">
      <h3>goalkeepers</h3>
    </div>
  </a>

  <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
</div>

You can use sibling selector to select the image on hover of the anchor tag

.hoverme:hover + img { ...

Snippet

img:hover {
  -webkit-filter: blur(10px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  transform: scale(1.05);
}

.text h3 {
  margin-top: 0;
  margin-left: 0;
  text-align: center;
  font-variant: small-caps;
  font-weight: 100;
  font-size: 2.9vw;
  font-family: montserratlight;
}

.text {
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 0.1vw;
  display: inline-block;
}

.text:after {
  content: "";
  display: block;
  margin: auto;
  height: 0.15vw;
  width: 0px;
  background: transparent;
  transition: width 0.55s ease, background-color 0.55s ease;
}

.hoverme {
  position: absolute;
  left: 80%;
  top: 25%;
}

.hoverme:hover+img {
  -webkit-filter: blur(10px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  transform: scale(1.05);
}

.dummy-text {
  position: relative;
  transform: rotate(-90deg);
  font-size: 1em;
  z-index: 100;
  width: 100px;
  right: -336px;
  top: -81px;
  /* font-weight: bold; */
  color: white;
}


}

<div class="class">

  <a href="#" class="hoverme">
    <div class="text">
      <h3>goalkeepers</h3>
    </div>
  </a>

  <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
  <div class="dummy-text">Dummy-Text</div>
</div>

Answer 2

Go through this link, It has the detailed answer for your question !! I was facing the same problem, it helped me alot !

https://stackoverflow.com/a/29707839/6422740

This issue is that you are attempting to traverse up the document tree with CSS. There is no parent selector in CSS, therefore you can only rely on JS to toggle the blur effect when the inner element is hovered on.

This can be easily achieved using native JS, but I've chosen to use jQuery because of the relative ease of use.

The trick is quite simple: to absolutely position a blurred version of the background image, nested in a pseudo-element, say ::before, with its opacity set to zero. When the cursor is over the inner element, toggle a class, say .blur, which sets the pseudo-element's opacity to 1.

The reason why we can't use JS to set the CSS properties of the pseudo-element is because it is not accessible to JS.

$(function() {
  $('.banner_link a').hover(function() {
    $('#pic').addClass('blur');
  }, function() {
    $('#pic').removeClass('blur');
  });
});

#pic {
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  position: relative;
  overflow: hidden;
}
#pic::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
#pic.blur::before {
  opacity: 1;
}
.banner_link {
  font-family: 'Raleway';
  letter-spacing: 0.2em;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
  padding-top: 45px;
  position: relative;
  text-transform: uppercase;
}

.banner_link a::after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 90px;
  background: #ffffff;
  transition: width .2s ease, background-color .5s ease;
}

.banner_link a:hover:after {
  width: 0px;
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic" class="banner">
  <div class="banner_link"><a>Link</a>
  </div>
</div>