How to un-blur the image text on hover using css - css

Question

I have an image tag in my html and below is my html element when user logins into the application it becomes blur but if user hovers on that i need to unblur it and display the text which is present in that image.How can i do this?
what i tried?
img {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}
<img src="https://dummyimage.com/300x300" width="109" height="19" style="vertical-align:top;" border="0">
but its not working

Answer 1

You could add a class attribute on your <img> element that has a :hover pseudo-selector like this:
.blurred {
opacity: .5;
}
.blurred:hover {
opacity: 1;
}
This results in the element having half the opacity initially and on hover it will have it's full opacity restored.
<img class="blurred" ...otherAttrs>

Answer 2

You dont clearly state how you achived the blur in your question, but assuming you used filter: blur(), then this will do the trick:
Your normal img tag should haver filter: blur(Xpx); applied
When hovering (img:hover) you just apply a blur of 0 (filter: blur(0);)
img {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
filter: blur(8px);
}
img:hover{
filter: blur(0);
}
<img src="https://dummyimage.com/300x300" width="500" height="200" style="vertical-align:top;" border="0">

Answer 3

Just set the blur value to 0px
EDIT
I think you should use class or id like this
<!-- added id attribute -->
<img src="https://realview/view-contact-number.gif" width="109" height="19" id="blur" border="0">
#blur {
vertical-align: top;
-webkit-filter: blur(10px);
}
#blur:hover {
-webkit-filter: blur(0px);
}