title: How to make text slide by only using css/html
body: <p>I'm trying to make a caption slide into a picture from the top once you mouse over it. Everything seems to work except for the fact that the text does not Slide. The animation happens instantly. Is there a way to make the text slide without coding jQuery? I'm not too familiar with <code>-webkit-transitions</code> but I ended up using a lot for this code.</p>
  
  <p>HTML 1st Column of Grid:</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
    &lt;a href="#" class="darken"&gt;
      &lt;h3 class="pictureCaption"&gt;Click Me!&lt;/h3&gt;
      &lt;img class="img-responsive" src="http://placehold.it/300x300"&gt;
    &lt;/a&gt;
    &lt;a href="#" class="darken"&gt;
      &lt;h3 class="pictureCaption"&gt;Click Me!&lt;/h3&gt;
      &lt;img class="img-responsive" src="http://placehold.it/300x300"&gt;
    &lt;/a&gt;
  &lt;/div&gt;&lt;!-- end col-md-4 --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*-------------------------------
        Picture Gallery
  ---------------------------------*/
  #pictureGallery .row .col-md-4 {
      text-align: center;
  }
  
  #pictureGallery .row .col-md-4 .darken {
      display: inline-block;
      background: black;
      padding: 0px;
      margin-top: 10px;
  }
  
  #pictureGallery .row .col-md-4 .darken img {
      display: block;
      padding: 0;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      transition: all 0.5s linear;
  }
  
  #pictureGallery .row .col-md-4 .darken:hover img {
      opacity: 0.7;
  }
  
   .pictureCaption {
      position: absolute;
      margin-left: 100px;
      margin-top: -40px;
      color: transparent;
      transition: all 2s;
      -webkit-transition: all 2s;
  }
  
  #pictureGallery .row .col-md-4 .darken:hover .pictureCaption {
      color: white;
      top: 120px;
  }
  </code></pre>
  
  <p>Thanks in advance! I'm a rookie.. but I've learned so much from this site! Any tips are appreciated!</p>
  
  <p>I Made a JS Fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Veetz/7ec7avrd/" rel="nofollow">http://jsfiddle.net/Veetz/7ec7avrd/</a></p>