title: CSS hover show text at specific position
body: <p>I want to make only the text of the hovered image visible, and it should be in the grey space next (left/right) to the hovered picture (not under the picture outside of the grey space).</p>
  
  <p>Is that possible only with css?</p>
  
  <p>If not what do I need ? javascript?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="pictures"&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="pic"&gt;
          &lt;img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/&gt;&lt;p&gt;This is a beautiful flower!&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.pictures {
      background-color:rgba(25, 25, 25, 0.3);
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      --width: 960px;
      float:left;
      margin: 0 auto;
      position:relative;
      left:100px;
      transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
  }
  .pictures:hover {
      left:40px;
  }
  .pic {
      width:100px;
      height:100px;
      float:left;
      margin:5px;
      position: relative;
      right: 0;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      background-color:rgba(25, 25, 25, 0.7);
      transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      color:blue;
      border-radius: 3px;
      /*abgerundete Ecken*/
  }
  .pic:hover {
      width:210px;
      height:210px;
      margin:5px 115px 0px -105px;
      right: -110px;
  }
  .inner-img {
      width:100%;
  }
  </code></pre>
  
  <p>On <a href="http://jsfiddle.net/Vloxxity/BCvPk/" rel="nofollow">jsFiddle</a> the working example.</p>