title: css image overlay slide-in from where mouse entered div
body: <p>I have a portfolio grid that I would like to have an overlay slide in on mouse hover, but I need the overlay to be able to slide in from all sides of the div as I want the overlay to a slide in from where the mouse entered the div.</p>
  
  <p>Ex: if you enter the image box from the left side, then the overlay animation will slide from left to right, etc etc...</p>
  
  <p>Below is a link of exactly what I need to do, but unfortunately, this website was made in wordpress.</p>
  
  <p><a href="http://demos.dnnzone.com/Portfolios/PortfolioGridwithStylishHoverEffect.aspx" rel="nofollow noreferrer">DNN Zone Website - Grid Portfolio Image Hover Overlay</a> </p>
  
  <p>Any help finding a good css, jquery, or javascript plugin, or anything that you think might work will be greatly appreciated.</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE:</strong>
  In Case anybody else land on the same issue, below is the link to the JQuery plugin.</p>
  
  <p><a href="https://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/" rel="nofollow noreferrer">https://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/</a></p>