title: Expand image horizontally on hover in CSS
body: <p>I want to build a home page for a website project I'm doing with some friend where the whole page will basically be three images one next to the other like so:</p>
  
  <pre><code>|1|2|3| --hover--&gt; |1    ||| or --hover--&gt; ||2     || or --hover--&gt; |||3    |
  </code></pre>
  
  <p>each "square" with a number representing an image. The squeezed "squares" are like very small openings for switching to another image by hovering on them.</p>
  
  <p>Now my idea was to have each image expand over the remaining two when the user hovers over it.</p>
  
  <p>I've found this (<a href="http://jsfiddle.net/harmeister/a4n6e/18/" rel="nofollow">http://jsfiddle.net/harmeister/a4n6e/18/</a>) which is kind of what I'm looking for, but I'm not good enough to adapt it to my needs. Ideally, some text would appear on the expanded image, but I think I know how to do that.</p>
  
  <p>I am not sure if this is possible in pure CSS, but that's what I'd prefer.</p>