title: What to use as hover effect for an image?
body: <p>I want to achieve the following hover effect on my portfolio elements -
  <a href="http://imgur.com/a/JGhLT" rel="nofollow">link with before and after</a>.</p>
  
  <p>I am using Bootstrap with Masonry so the HTML for the original image is looking like that:</p>
  
  <pre><code>&lt;div class="col-md-4 col-sm-6 item"&gt;
      &lt;img src="img/portfolio3.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can use jQuery <code>.hover()</code> function to swap the image source and also I was thinking for the heading and button to have the two elements hidden before the hover event like following:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-md-4 col-sm-6 item"&gt;
      &lt;img src="img/portfolio3.jpg"&gt;
      &lt;div class="captions"&gt;
          &lt;h3&gt;AncaGV Blog&lt;/h3&gt;
          &lt;button&gt;&lt;/button&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.item img').hover(function(){
      $(this).attr('src','portfolio3b.jpg');
      $(this).next().slideToggle('slow');
  });
  </code></pre>
  
  <p>Please note that I've just write the code here, haven't tested yet because I want to ask if there is a possibility to use CSS for the shadow effect instead of swaping the image sources.</p>
  
  <p>Also, if someone could suggest maybe a better aproach regarding the heading and the button I would be more than glad to try it out. For now I am thinking to hide the div and position it over the bottom of the image.</p>