title: On hover slide image left (jQuery) and back if no hover
body: <p>First, thanks for reading my question. I'm trying to make grid of 3 images that slide over each other when a user hovers over it. I've seen this on many websites but I don't know what this effect/plugin is called. So I made a image and a fiddle of what I'm trying to accomplish. </p>
  
  <p>The start:</p>
  
  <p>3 images positioned horizontally. The <code>first image</code> is almost completely visible except for some <code>tab-like</code> bars on the right. When you would hover over the <code>second image</code> it will slide to the left leaving only a small (again) <code>tab-like</code> bar on the right. The same goes for the <code>third image</code>. See this image I've made.</p>
  
  <p><a href="https://i.stack.imgur.com/ZNEGF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZNEGF.jpg" alt="enter image description here"></a></p>
  
  <p>If a user doesn't hover any of the images it just goes back to the default of showing the <code>first image</code> and the <code>second</code> and <code>third image</code> in <code>tab-like</code> state.</p>
  
  <p>I've also made a fiddle <a href="https://jsfiddle.net/q8jsdtrh/1/" rel="nofollow noreferrer">here</a> to show the way the images should be animated.</p>
  
  <p>But as you can see this is not perfect. Does anyone here have a snippet I could use because my jQuery skills are not there yet. But I think this (should) could be accomplished easier and with less code I think? And even maybe more elegantly.</p>
  
  <p>Thanks for the (long) read... </p>