title: Transition according to caption width
body: <p>I'm building an image overlay from right to left transition. The transition is working fine but the caption is 45% width of the image and I want the transition to stop at the end of caption width not continue till the end of image width.<br>
  This is my code  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.screenshot {
    float: left;
    margin: 50px;
    position: relative;
    overflow: hidden;
  }
  
  .screenshot &gt; * {
    display: block;
  }
  
  .screenshot h3 {
   margin: 8px;
   padding: 0;
   text-indent: 0;
   text-align: right;
   font: 21px/25px "TwCenMT";
   text-transform: none;
   text-decoration: none;
   color: #fff;
   letter-spacing: normal;
  }
  
  .screenshot-caption {
   position: absolute;
   width: 45%;
   height: 100%;
   background: rgb(93, 84, 77);
   background: rgba(93, 84, 77, .7);
   color: #ed4e6e;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  }
  .screenshot-caption h1 {
    color: #fff;
  }
  .screenshot-caption a {
    display: table;
    margin: 0 auto;
    bottom:0;
    text-align: center;
    background: #2c3e50;
    padding: 6px 12px;
    color: #000;
    text-decoration: none;
  }
  
  .screenshot-caption &gt; * {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 0;
  }
  .screenshot-caption_right {
    top: 0;
    left: 100%;
  }
  
  .screenshot:hover .screenshot-caption {
    top: 0;
    left: 0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .screenshot:hover .screenshot-caption &gt; * {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="screenshot"&gt;
    &lt;img src="http://fillmurray.com/300/200"&gt;
    &lt;div class="screenshot-caption screenshot-caption_right"&gt;
      &lt;h1&gt;Right to Left&lt;/h1&gt;
      &lt;a href="#"&gt;Read More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/vhp2nL7k/" rel="nofollow">http://jsfiddle.net/vhp2nL7k/</a></p>
  
  <p>The transition should be 45% of the image according to caption width</p>