title: On hover image enlarge and text display over it CSS3
body: <p>I am trying to make a responsive image page for my website. So far i have made it so the images on the page are all responsive and keep centred for what ever size the browser is. </p>
  
  <p>My problem is that when i hover on an image it enlarges but pushes all the other images out its way. I would like it so that it enlarges but all the other images keep their position, i have tries position absolute but this didn't work.</p>
  
  <p>Also I would really like to add hover text to the images, I would like it so that when an image is hovered you can see a text from the centre, i would like to do this with just html/css and not need a separate image for the text and possibly without javascript. </p>
  
  <p>Here is my current HTML;</p>
  
  <pre><code>&lt;div class="imgwrap"&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;img src="http://placehold.it/120x120" alt="DTE" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS; </p>
  
  <pre><code>.imgwrap {
  width:90%;
  margin:0 auto;
  padding:5px;
  overflow:hidden;
  text-align:center;
  }
  .imgwrap img {
  display:inline-block;
  width:300px;
  height:200px;
  margin:5px;
  cursor:pointer;
  -webkit-transition:opacity 0.26s ease-out;   
  -moz-transition:opacity 0.26s ease-out;   
  -ms-transition:opacity 0.26s ease-out;   
  -o-transition:opacity 0.26s ease-out;   
  transition:opacity 0.26s ease-out; 
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:5px;
  transition:500ms;
  
  }
  
  
  
  .imgwrap:hover img {
  opacity:0.5;
  }
  
  .imgwrap:hover img:hover {
  opacity:1;
  width:400px;
  height:266px;
  transition:500ms;
  }
  
  @media screen and (max-width:500px) {
  .imgwrap img {
      width:200px;
      height:133px;
  }
  }
  </code></pre>
  
  <p>Also here is a JS fiddle for you to see a live version of my image page <a href="http://jsfiddle.net/Z66Z9/" rel="nofollow">http://jsfiddle.net/Z66Z9/</a>
  You may need to extend the 'result' box so that you can see what my image page really looks like. </p>
  
  <p>Thankyou very much for any help .</p>