title: Mouseover fade effect in bootstrap template
body: <p>I am using bootstrap in my web application and I am using the 'img-responsive' class to get the following result</p>
  
  <p><img src="https://i.stack.imgur.com/pG9Ra.png" alt="enter image description here"></p>
  
  <p>My question is how can I add a mouseover fade effect. I used the following code to get my desired effect but I am not sure how to incorporate that with the bootstrap theme. I tried to add the fade out css but I am not getting that right:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $(document).ready(function(){
  
  $("img.a").hover(
  function() {
  $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
  $(this).stop().animate({"opacity": "1"}, "slow");
  });
  
  });
  &lt;/script&gt;
  &lt;style&gt;
  div.fadehover {
      position: relative;
      }
  
  img.a {
      position: absolute;
      left: 0;
      top: 0;
          z-index: 10;
      }
  
  img.b {
      position: absolute;
      left: 0;
      top: 0;
      }
  &lt;/style&gt;
  </code></pre>