Filter TransitionHover not working, can anyone help me?

Question

I tried a lot of ways, but it didn’t work, here’s my code:

.left {
	left: -100px;
	margin-top: 50px;
	filter: contrast(0.8) brightness(1.2) saturate(1.4) blur(4px);
	-webkit-filter: contrast(0.8) brightness(1.2) saturate(1.4) blur(4px);
	-moz-filter: contrast(0.8) brightness(1.2) saturate(1.4) blur(4px);
	transition: filter 4s;
	-o-transition: filter 4s;
	
	
}
.left:hover{
	-webkit-filter: blur(0px);
   -moz-filter:blur(0px);
	filter: blur(0px);

	
}

div class="container">
         <h1>Find your own spot</h1>
       		<p><a href="http://theawwwesomes.org" target="_blank">Created by The Awwwesomes</a>, Pics by <a href="http://unsplash.com" target="_blank">Unsplash</a>.<br>
            Lo-fi iceland whatever activated charcoal listicle. Jianbing chicharrones pug wayfarers. Affogato selfies seitan, keytar forage blog iPhone before they sold out you probably haven't heard of them hot chicken next level farm-to-table. Banjo glossier fixie affogato, try-hard sartorial umami godard. Unicorn flexitarian iceland food truck poutine, 90's butcher copper mug subway tile activated charcoal glossier. Kogi enamel pin cred blog intelligentsia art party farm-to-table. Schlitz farm-to-table retro everyday carry typewriter.</p>
          <img src="images/girl.jpg" alt="Girl" class="photo-caption left">
          <img src="images/water.jpg" alt="Water" class="photo-caption right">

       		<h2>You can do it</h2>
       		<p>Church-key selvage kitsch wayfarers, semiotics vinyl subway tile echo park celiac 90's. Fap cliche fam migas. Poke waistcoat mustache portland drinking vinegar. Chambray 8-bit put a bird on it, enamel pin la croix vinyl YOLO flexitarian mumblecore lyft vice you probably haven't heard of them edison bulb stumptown. Cray selvage marfa, woke thundercats vinyl coloring book ramps you probably haven't heard of them. Affogato brunch tilde, next level PBR&B VHS XOXO hexagon biodiesel. +1 letterpress mumblecore locavore ennui roof party. Banjo +1 man bun af succulents. Biodiesel snackwave wolf, pitchfork photo booth retro keytar. Tbh fixie narwhal flexitarian, cornhole thundercats mumblecore trust fund succulents. Banjo neutra mixtape, distillery health goth wayfarers bicycle rights pop-up pabst copper mug. Roof party tacos cardigan, pickled keytar forage yr raw denim williamsburg ennui. +1 meggings marfa, helvetica vegan lumbersexual VHS cliche bespoke portland freegan pinterest. Neutra leggings selvage, migas truffaut tattooed cronut 8-bit pickled.</p>
       </div>

Answer 1

Apparently this is happening because you are putting other properties in the filter besides the blur(), and in the :hover these properties are not declared:

.left{
    filter: contrast(0.8) brightness(1.2) saturate(1.4) blur(4px);
}
.left:hover{
    filter: blur(0px);
}

Fixing it seems to work: (just put 1s of transition to view faster)

.left {
    left: -100px;
    margin-top: 50px;
    filter: contrast(0.8) brightness(1.2) saturate(1.4) blur(4px);
    transition: filter 1s;
}
.left:hover{
    filter: contrast(0.8) brightness(1.2) saturate(1.4) blur(0px);
}

<div class="container">
  
  <img src="images/girl.jpg" alt="Girl" class="photo-caption left">
  <img src="images/water.jpg" alt="Water" class="photo-caption right">
  
</div>

Another thing worth checking out is your use of the prefixes -webkit,-moz and -o, that in the code posted you added them in the class .left but in the .left:hover you forgot the -o.