title: How do I focus image from the center (CSS focus)?
body: <p>I got the left image to focus from the left(default) and right image focus from the right. </p>
  
  <pre><code>a:nth-child(3) img{
  right: 0;
  }
  </code></pre>
  
  <p>But how do I make the center image focus from the center?
  Also, is there a way to make all images focus from the same place (middle of the page or do I have to use some other technique for that all together(html/css only)? Finally, is there a better technique for building this type of gallery?(html/css only)</p>
  
  <p><a href="http://codepen.io/alexdj1983/pen/NPZMre" rel="nofollow" title="Codepen Link">Codepen link</a></p>
  
  <p>Thank you.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="thumb_main.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;Thumbnails Gallery&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="gallery"&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;a tabindex="1"&gt;&lt;img src="ball.jpg"&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
  margin: 0;}
  
  .gallery{
  margin:20px auto;
  width:900px;
  height:900px;
  position:relative;
  }
  
  a {
  float:left;
  position: relative;
  width:30%;
  height:30%;
  border: 1px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }
  
  a img{
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition-duration: 300ms; 
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  position: absolute;
  cursor: pointer;
  }
  
  a:focus img{
  width: 200%; 
  height: 200%;
  position: absolute;
  opacity:1; 
  z-index: 1; 
  -moz-box-shadow: 0 0 15px 2px #000;
  -webkit-box-shadow: 0 0 15px 2px #000;
  box-shadow: 0 0 15px 2px #000; 
  -webkit-transition-duration: 1s; 
  -webkit-transition-delay: 0.3s; 
  -moz-transition-duration: 2s;
  -moz-transition-delay: 0.3s;
  -o-transition-duration: 2s;
  -o-transition-delay: 0.3s;
  cursor: default;
  }
  
  a:nth-child(3) img{
  right: 0;
  }
  </code></pre>