Why is transition timing function not working? - css

Question

I'm in the middle of project where I used transition property to delay filter blur. For some reason the timing function is not working. What could be the reason? Here is my code:
.project-tile img {
max-width: 100%;
max-height: auto;
filter: blur(1px);
-webkit-filter: blur(1px);
transition: all 500ms linear;
}
.project-tile img:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
transition: all 500ms linear;
}
HTML:
<section id="projects">
<div class="container">
<div class="projects-text">
<h2>My Recent Work</h2>
<p>Here are a few recent projects of mine:</p>
</div>
<div class="grid-3">
<div class="project-tile" id="project-tile-1">
<img src="images/project-1.png" alt="project">
<div class="project-title">Vegan Survey Form</div>
<p>This is a survey about vegan diet.</p>
See Website
</div>
<div class="project-tile">
<img src="images/project-2.png" alt="project">
<div class="project-title">Documentation Page</div>
<p>It's a reference page for learning CSS.</p>
See Website
</div>
<div class="project-tile">
<img src="images/project-3.png" alt="project">
<div class="project-title">Peter the Rabbit</div>
<p>It's a landing page for Peter the Rabbit</p>
See Website
</div>
</div>
</div>
</section>

Answer 1

.project-tile img {
max-width: 100%;
max-height: auto;
filter: blur(5px);
transition: filter .5s ease;
}
.project-tile img:hover {
filter: blur(0px);
}
<div class="project-tile">
<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" />
</div>