title: jQuery: slide in from right side only
body: <p>I've figured out how to integrate the jQuery slide toggle function to make my caption slide in/out over my image, but it's sliding in from the bottom right corner and I want it to slide only from the right side.</p>
  
  <p>I have to keep the paragraph formatting and position at the bottom of the caption, with the semi-transparent white padding spanning the entire height of the responsive image. Any help is much appreciated!</p>
  
  <p>UPDATE: I seem to have it working on this jsFiddle, but still not on the website.
  Demo: <a href="http://jsfiddle.net/tyuth1sr/16/" rel="nofollow">http://jsfiddle.net/tyuth1sr/16/</a></p>
  
  <p>Active page: <a href="http://parkerrichard.com/studiogreen/html/schools-caption-test.html" rel="nofollow">http://parkerrichard.com/studiogreen/html/schools-caption-test.html</a></p>
  
  <p>jQuery:</p>
  
  <pre><code>    $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "fade"
        });
      });
  
      $("#slideshow").click(function() {
        $( ".flex-caption" ).toggle( "slide" );
      });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* flexslider styling */
  
  .flexslider {
      background:none !important;
      border:none !important;
      box-shadow:none !important;
  }
  
  .slides {
      overflow: hidden !important;
  }
  
  .right {
      right: 0;
      margin-bottom: 0px;
  }
  
  .flex-caption {
      position: absolute;
      text-align: left;
      background:rgba(255, 255, 255, 0.7);
      z-index: 1;
      padding: 20px;
      width: 295px;
      padding-top: 100%;
      bottom: 0px;
      display: none;
  }
  
  .show-caption {
      position: absolute;
      top: 48%;
      right: 100px;
      z-index: 100;
      opacity: 0.8;
      filter: alpha(opacity=80); /* For IE8 and earlier */
      pointer-events: none;
  }
  </code></pre>