title: CSS overlay coming from corners
body: <p>I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image. </p>
  
  <p><img src="https://i.stack.imgur.com/mtq6z.jpg" alt="enter image description here"></p>
  
  <p>I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated</p>