title: on Mouse-Hover Image Focused / Grid gallery
body: <p><a href="http://jsfiddle.net/Doodle/d3sLj/5/embedded/result/" rel="nofollow noreferrer">Live Demo</a><br>
  <img src="https://i.stack.imgur.com/c3NR5.jpg" alt="screenshot"></p>
  
  <p>The Need of the concept is...<br/> 
  There are thumbnails.<br/>
  The thumbnails remains covered with a black overlay). <br/>
  <strong>on Mouse-hover on a certain image, it gets lighted up</strong> ( or an animation of flip or rotation would be a bonus...lol) <br/>
  On Clicked, the image is brought up to its real dimensions through fancybox.<br/><br/>
  I have tweaked around with the fancy box script &amp; the fancy box function is already happening.<br></p>
  
  <pre><code>$(".fancybox").fancybox({
      padding : 0,
      openEffect: 'elastic',
      openSpeed: 250,
  
     closeEffect: 'elastic',
     closeSpeed: 450,
     closeClick: false,
  
      helpers : {
      overlay : {
          css : {
              'background' : 'rgba(0, 0, 0, 0.9)'
          }
      }
  }
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/GsRxs/" rel="nofollow noreferrer">Working code</a><br>
  I need some help to modify on the existing code for the on-hover function (or the animation) (^_^) <br>
  Cheers!! </p>