Making text show up on hover and blur effect blinking fix
<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}

img{
 -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

img:hover{
 -webkit-filter:blur(5px);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://i.stack.imgur.com/K0jNI.png"&gt;</code></pre>
</div>
</div>
</p>

<p>When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?</p>

<p>And how do i make a text show up on the middle of the image when i hover over it?</p>