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](https://jsfiddle.net/a01wg0Lt/)